Popup component for Angular 2 - sample

• ONLINE DEMO
• Go to ng2-opd-popup on npm

in your module include:

import {PopupModule} from 'ng2-opd-popup';

@NgModule({
  imports: [
    ...
    PopupModule.forRoot()
  ],
  declarations: [
   ...
  ],
  providers: [
   ...
  ],
  bootstrap: [...]
})

in your view (html)

<popup>
    Add your custom html elements here
</popup>

In your component:

import {Popup} from 'ng2-opd-popup';

export class YourComponent {
 constructor(private popup:Popup) { }

 ClickButton(){
    this.popup.show();
  }
}

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)

<popup  #popup1>
    Add your custom html elements here
</popup>

<popup  #popup2>
    Add your other custom html elements here
</popup>

In your component:

import { Component, ViewChild } from '@angular/core';
import {Popup} from 'ng2-opd-popup';

export class YourComponent {

  @ViewChild('popup1') popup1: Popup;
  @ViewChild('popup2') popup2: Popup;

  constructor() { }

  ClickButton(){
    this.popup1.show();
  }

  ClickAnotherButton(){
    this.popup2.show();
  }
}

Options:

You can set the following options for your popup:

this.popup.options = {
    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'
};

  this.popup.show(this.popup.options);

Events:

You can subscribe to the confirm and cancel button event.

<popup  (confirmClick)="YourConfirmEvent()" (cancelClick)="YourCancelEvent()">
    Add your own html elements here
</popup>

YourConfirmEvent(){
  alert('You cliked confirm');
}

YourCancelEvent(){
  alert('You cliked cancel');
}