In all my web projects, I seem to need a popup in many places, obviously doing different things. Even though it is quite easy plugging a bootstrap dialog doing the same, I figured it was even better creating an Angular 2 component for this, so I have fast access with almost no code.
I built the ng2-opd-popup with these criteria in mind:
1. I want to be able to show the popup with one line of code (popup.show();)
2. I want to be able to have multiple popups in one page doing different things
3. I want to be able to access my popup from my parent page
4. I want to be able to style it, and have some animation on popping up
5. I want to be able to add whatever content, if it is a form or a message or whatever
6. I want to catch Confirm and Cancle events, if I do not decide to have my own custom buttons
7. I want to be able to set the size of the popup
8. I wanted it to stretch on page if it is a mobile device
9. I want it to support AOT compiling
So, that in mind, I came up with this solution:
In your view (html):
<popup #popup1> Add your custom html elements here popup>
In your component:
@ViewChild('popup1') popup1: Popup; ClickButton(){ this.popup1.show(); }
You can check out all the possibilities in the documentation, with sample codes here
You can check out a demo here
Thanks for reading.