File
Methods
|
stopPropagation
|
stopPropagation(event: Event)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
Event
|
No
|
|
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Payment } from '../../../models';
@Component({
selector: 'app-payment-cancel',
templateUrl: './payment-cancel.component.html',
styleUrls: ['./payment-cancel.component.css']
})
export class PaymentCancelComponent {
@Input() payment: Payment;
@Output() cancelDelete = new EventEmitter();
@Output() cancelPayment = new EventEmitter();
delete() {
this.cancelPayment.emit(this.payment.id);
}
cancel() {
this.cancelDelete.emit();
}
stopPropagation(event: Event) {
event.stopPropagation();
}
}
<div class="overlay" (click)="cancel()">
<div class="pop-up-ctn" id="deleteAccountConfirmation">
<div class="close-ctn" (click)="stopPropagation($event)">
<a id="closeButton" (click)="cancel()">
<i class="material-icons">close</i>
</a>
</div>
<div class="pop-up-ctn-header" (click)="stopPropagation($event)">
<p id="cancelTransferHeader" class="header-text">
<i class="material-icons cancel-payment-icon">money_off</i> Cancel Transfer</p>
</div>
<div class="pop-up-ctn-body text-left" (click)="stopPropagation($event)">
<p>Are you sure you want to cancel this payment?</p>
<p class="delete-options">
<span class="delete-option">
<a id="exitButton" (click)="cancel()">Exit</a>
</span>
<span class="delete-option">
<a id="cancelTransferButton" (click)="delete()">Cancel Transfer</a>
</span>
</p>
</div>
</div>
</div>
#deleteAccountConfirmation .delete-options {
color: #dc8e49;
margin-bottom: 0px;
text-align: right;
}
#deleteAccountConfirmation .delete-option {
margin-right: 15px;
cursor: pointer;
}
.para-dark {
margin-bottom: 0px;
}
.text-center {
margin-bottom: 0px;
line-height: 20px;
}
.delete-account .st1 {
fill: #39474f !important;
}
Legend
Html element with directive