Popup component for Angular 2
- ONLINE DEMO
- Source code for demo project HERE
in your module include:
; @
in your view (html)
Add your custom html elements here
In your component:
; { } { thispopup; }
If you want to have multiple popups in your page with different html content you can use @ViewChild, in that case you don't need to inject it in your constructor
in your view (html)
Add your custom html elements here Add your other custom html elements here
In your component:
;; @ popup1: Popup; @ popup2: Popup; { } { thispopup1; } { thispopup2; }
Options:
You can set the following options for your popup:
thispopupoptions = header: "Your custom header" color: "#5cb85c" // red, blue.... widthProsentage: 40 // The with of the popou measured by browser width animationDuration: 1 // in seconds, 0 = no animation showButtons: true // You can hide this in case you want to use custom buttons confirmBtnContent: "OK" // The text on your confirm button cancleBtnContent: "Cancel" // the text on your cancel button confirmBtnClass: "btn btn-default" // your class for styling the confirm button cancleBtnClass: "btn btn-default" // you class for styling the cancel button animation: "fadeInDown" // 'fadeInLeft', 'fadeInRight', 'fadeInUp', 'bounceIn','bounceInDown'; thispopup;
Events:
You can subscribe to the confirm and cancel button event.
Add your own html elements here
{ ;} { ;}