NG2 - Confirmation Pop up show for Warning then Yes or No pop up confirmation

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();
 }
}



}