src/app/recipients/recipient-delete/recipient-delete.component.ts
| selector | app-recipient-delete |
| styleUrls | recipient-delete.component.css |
| templateUrl | ./recipient-delete.component.html |
Methods |
Inputs |
Outputs |
template
|
Type: |
cancelDelete
|
$event type: EventEmitter
|
deleteTemplate
|
$event type: EventEmitter
|
| cancel |
cancel()
|
|
Returns :
void
|
| delete |
delete()
|
|
Returns :
void
|
| stopPropagation | ||||||
stopPropagation(event: Event)
|
||||||
|
Parameters :
Returns :
void
|
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Template } from '../../models';
@Component({
selector: 'app-recipient-delete',
templateUrl: './recipient-delete.component.html',
styleUrls: ['./recipient-delete.component.css']
})
export class RecipientDeleteComponent {
@Input() template: Template;
@Output() cancelDelete = new EventEmitter();
@Output() deleteTemplate = new EventEmitter();
delete() {
this.deleteTemplate.emit(this.template.id);
}
cancel() {
this.cancelDelete.emit();
}
stopPropagation(event: Event) {
event.stopPropagation();
}
}
<div class="overlay scroller" (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 class="header-text">{{template.name}}</p>
</div>
<div class="pop-up-ctn-body" (click)="stopPropagation($event)">
<p id="areYouSureLabel">Are you sure you want to delete this recipient?</p>
<p class="delete-options">
<span class="delete-option">
<a id="cancelDeleteButton" (click)="cancel()">Cancel</a>
</span>
<span class="delete-option">
<a id="confirmDeleteButton" (click)="delete()">Delete Recipient</a>
</span>
</p>
</div>
</div>
</div>