File
Methods
|
stopPropagation
|
stopPropagation(event: Event)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
Event
|
No
|
|
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Template } from '../../../models';
@Component({
selector: 'app-template-delete',
templateUrl: './template-delete.component.html',
styleUrls: ['./template-delete.component.css']
})
export class TemplateDeleteComponent {
@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" (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 id="deleteAccountHeader" class="pop-up-ctn-header" (click)="stopPropagation($event)">
<p class="header-text">
<!-- Delete Template SVG -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 7.7 7.7" style="enable-background:new 0 0 7.7 7.7;" xml:space="preserve" class="delete-account">
<style type="text/css">
.st0 {
fill: none;
}
.st1 {
fill: #717274;
}
.st2 {
fill: #FFFFFF;
}
</style>
<path class="st0" d="M0,0h7.7v7.7H0V0z" />
<path class="st1" d="M1.3,3.2v2.3h1V3.2C2.3,3.2,1.3,3.2,1.3,3.2z M3.2,3.2v2.3h1V3.2C4.2,3.2,3.2,3.2,3.2,3.2z M0.6,7.1h6.1v-1H0.6
V7.1z M5.1,3.2v2.3h1V3.2C6.1,3.2,5.1,3.2,5.1,3.2z M3.7,0.3l-3,1.6v0.6h6.1V1.9L3.7,0.3z" />
<polygon class="st1" points="0.3,0.8 0,1.3 7,5.7 7.4,5.1 " />
<polygon class="st2" points="0.6,0.2 0.3,0.7 7.4,5.2 7.7,4.6 " />
</svg>
Delete Account</p>
</div>
<div class="pop-up-ctn-body text-left" (click)="stopPropagation($event)">
<p id="deleteAccountConfirmationLabel">Are you sure you want to delete this account?</p>
<p class="delete-options">
<span class="delete-option">
<a id="cancelButton" (click)="cancel()">Cancel</a>
</span>
<span class="delete-option">
<a id="deleteAccountButton" (click)="delete()">Delete Account</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