NG2 - Confirmation Pop up show for Warning then Yes or No pop up confirmation
------------------------------------------------------------------------------
import the popup component and Confirmation-Popup into app.module.ts or required module
App.component.html
-------------------
...... app content
<popup [close]="AlertPopupAlert" [popuptitle]="modaltitleMsg" [popupTxtMsg]= "modalMsgContent" (closepopupclicked)="closeAlertPopup($event)"></popup>
<confirmation-popup [confirmclose]="showConfirm" [confirmtitle]="confirmationTitle" [confirmsg]="confirmTxtMSg" (yesconfirmationclick)="Yesconfirm()" (noconfirmationClick)="NoConfirm()"></confirmation-popup>
App.component.ts
----------------
@Component({
})
export class AppComponent{
//popup
AlertPopupAlert = true;
modaltitleMsg;
modalMsgContent;
successTrigger(){
this.AlertPopupAlert = false;
this.modaltitleMsg = "Success !";
this.modalMsgContent = " Operation Success ";
}
WaringTrigger(){
this.AlertPopupAlert = false;
this.modaltitleMsg = "Warning / Info/ Fail !";
this.modalMsgContent = " Operation Failed ";
}
closeAlertPopup(){
this.AlertPopupAlert = true;
this.modaltitleMsg = ""; // not required. For making different process clearing the text msg.
this.modalMsgContent = "";
}
//confirmation - popup
showConfirm = true;
confirmationTitle;
confirmTxtMSg;
confrimationTrigger(){
this.confirmationTitle = "Warning !";
this.confirmTxtMSg = " Do you want to operation ?";
this.showConfirm = false;
}
Yesconfirm(){
this.AlertPopupAlert = false;
this.showConfirm = true;
this.modaltitleMsg = "Success !";
this.modalMsgContent = " Operation Success ";
}
NoConfirm(){
this.showConfirm = true;
this.confirmationTitle = "";
this.confirmTxtMSg = "";
}
}
Confirmation-popup.component.html
--------------
End of component .// Be default popup should be disabled // check the the component z-index if component has to come top of all the div.-->
<div [hidden]="confirmclose" style=" z-index: 12; top: 30%; position: fixed; margin-left:25%; height: 20%; width: 40%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);" *ngIf="showPopup">
<span style="float:left;"> {{ confirtitle }}</span> <span style="float:right;color:blue;padding-right:3px;padding-top:3px;cursor:pointer;" ((click)="closePopup()">X </span>
<div> {{ confirmsg }}</div>
<div><span class="button popup-button" (click)="noconfirmation()">No</span>
<span class="buttonpopup-button" (click)="yesconfirmation()">Yes</span>
</div>
</div>
Confirmation.popup.ts
------------------------
export class ConfirmationPopUp implements OnChanges, OnInit {
@Input() confirtitle:any = 'test';
@Input() confirmsg:any = 'test';
@Input() confirmclose = false;
@Output() yesconfirmationclick = new EventEmitter();
@Output() noconfirmationClick = new EventEmitter();
constructor(){
}
yesconfirmation(){
//this.close = true;
this.yesconfirmationclick.emit(true);
}
noconfirmation(){
this.noconfirmationClick.emit(true);
}
ngOnInit() {
}
ngOnChanges() {
}
keyboardEvent: any;
@HostListener('window:keydown', ['$event'])
keyboardInput(event: any) {
this.keyboardEvent = event;
if (event.keyCode == 27){
console.log("Esc Key press to clsoe current popup");
this.noluciconfirmation();
}
}
}
popup.component.html
--------------
End of component .// Be default popup should be disabled // check the the component z-index if component has to come top of all the div.-->
<div [hidden]="close" style=" z-index: 12; top: 30%; position: fixed; margin-left:25%; height: 20%; width: 40%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);" *ngIf="showPopup">
<span> {{ title }}</span> <span style="float:right;color:blue;padding-right:3px;padding-top:3px;cursor:pointer;" ((click)="closePopup()">X </span>
<span> {{ ShowPopupMessage }}</span>
</div>
popup.component.ts
-------------
import { Component, Input, Output, OnChanges, OnInit, EventEmitter, ViewEncapsulation, HostListener } from '@angular/core';
@Component({
selector: 'popup',
templateUrl: './component.html',
styleUrls: ['./component.css'],
encapsulation: ViewEncapsulation.None
})
export class Popup implements OnChanges, OnInit{
@Input() title:any = 'test';
@Input() ShowPopupMessage:any = 'test';
@Input() close = false;
@Output() closepopupclicked = new EventEmitter();
closePopup(){
//this.close = true;
this.closepopupclicked.emit(true);
}
ngOnInit() {
}
// @input and out put is required the ngOnChanges () life cycle function
ngOnChanges() {
}
// ESC key press to close the popup
keyboardEvent: any;
@HostListener('window:keydown', ['$event'])
keyboardInput(event: any) {
this.keyboardEvent = event;
if (event.keyCode == 27){
console.log("Esc Key press to clsoe current popup");
this. closePopup();
}
}
}
