File
Methods
|
stopPropagation
|
stopPropagation(event: Event)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
Event
|
No
|
|
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Template } from '../../../models';
@Component({
selector: 'app-template-micro-deposit-notification',
templateUrl: './template-micro-deposit-notification.component.html',
styleUrls: ['./template-micro-deposit-notification.component.css']
})
export class TemplateMicroDepositNotificationComponent {
@Input() template: Template;
@Output() cancelMicro = new EventEmitter();
cancel() {
this.cancelMicro.emit();
}
stopPropagation(event: Event) {
event.stopPropagation();
}
}
<div class="overlay">
<div class="pop-up-ctn">
<div class="pop-up-ctn-header" (click)="stopPropagation($event)">
<p id="microDepositsCreatedHeader" class="header-text">
<i class="material-icons micro-icon">play_for_work</i>Micro Deposits Have Been Created</p>
</div>
<div class="pop-up-ctn-body" (click)="stopPropagation($event)">
<ol>
<li> Two small deposits have been made to your newly created account. </li>
<li> They will arrive in your new account within two business days. </li>
<li> Once received come back and verify the amount to start sending and receiving funds with this account. </li>
</ol>
<button id="cancelButton" type="button" class="action-button" tabindex="1" (click)="cancel()">
<p class="button-inside">Ok, I Got It</p>
</button>
</div>
</div>
</div>
.ok-options {
color: #dc8e49;
margin-bottom: 0px;
text-align: right;
}
.ok-option {
margin-right: 15px;
cursor: pointer;
}
.micro-icon {
margin: -4px 4px 0px 0px;
vertical-align: middle;
}
ol {
margin: 0px;
padding: 0px;
text-align: left;
list-style-type: none;
}
ol li {
margin: 0px 0px 10px 0px;
line-height: 18px;
}
.action-button {
margin-top: 10px;
}
Legend
Html element with directive