NG2 - Pop up show for success / Warning / info across App / Component based

NG2 - Pop up show for success / Warning / info across App
-----------------------------------------------------------

import the popup component into app.module.ts 

App.component.html
-------------------

<popup  [close]="AlertPopupAlert" [popuptitle]="modaltitleMsg" [popupTxtMsg]= "modalMsgContent" (closepopupclicked)="closeAlertPopup($event)"></popup>

App.component.ts
----------------
@Component({
})

export class AppComponent{

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 = "";
}
}

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>

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{
  

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



}