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.