Popup in angular 4

Popup Box in angular 4

Popup is a plugin and it used to display a dialog box on the current page. Popup used to give the user data in order or create a new user. By using a popup we can minimize the number of pages and the details are opened on the same page.

App.module.ts

import the popup module in App.module.ts and we can use the popup tag in the typescript page

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {PopupModule} from 'ng2-opd-popup'

@NgModule({
  declarations: [
    homecomponent,
  ],
  imports: [
    BrowserModule,
    PopupModule
    ],
  providers: [ ],
  bootstrap: [ ]
})
export class AppModule { }

View page

Now add popup tag to display a modal, we can customise a modal from CSS, bootstrap, and popup open from typescript page.

<popup>
   <div class="row">
      <div class="col-sm-11 form-group">
      //add data
     </div>
  </div>
</popup>

Typescript page

import the popup in a typescript page and create a local variable in the constructor and use it.

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

@Component({
  selector: 'home',
  templateUrl: './home.html',
  styleUrls: ['./home.css']
})

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

Function call

open the popup by calling the function, there is two method for popup modal.

1) show()       2) hide()

popupopen(){
this.popup.options = {
    header: "Reschedule order",
    color: "#343A40",
    animationDuration: 1,
    showButtons: true,
    confirmBtnContent: "OK",
    cancleBtnContent: "Cancel",
    confirmBtnClass: "btn btn-default",
    cancleBtnClass: "btn btn-default",
    animation: "fadeInDown"
};
     
this.popup.show(this.popup.options);
}

close(){
   this.popup.hide();
}

Multiple popup

we can open the two or more popup modal in current page using popup id.

<popup #popup1>
  <div class="row">
    <div class="col-sm-11 form-group">
     //add data
    </div>
  </div>
</popup>

<popup #popup2>
  <div class="row">
    <div class="col-sm-11 form-group">
     //add data
    </div>
  </div>
</popup>

Typescript page

call the multiple popup by injecting local variable for the popup in @viewchild and use it

export class home {
    @ViewChild('popup1') popup1: Popup;
    @ViewChild('popup2') popup2: Popup;

    constructor(private popup:Popup){}

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

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