angular 4 popup

Want to learn how to create Angular 4 popup window?

Yes !

Great! Let’s rock it.

In this post, you are going to learn how to integrate Angular 4 dialog box? You will also learn to build a beautiful Angular 4 popup design.

 

Let’s get started…

 

Step by Step Guide to Integrate Angular 4 Popup Window

Using popup in Angular 4 is very easy. To get this feature, first, we need to install it within our Angular 4 project. For that, go to your project folder and run the following command.


npm install ng2-opd-popup

 

Above command will install popup in your Angular project.

 

Next, head over to /src/app/app.module.ts and import popup there.


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

 

We also need to add popup in @NgModuleimports array. Follow below example.


@NgModule({

  declarations: [

    AppComponent

],

  imports: [

    BrowserModule,

    FormsModule,

    HttpModule,

   PopupModule.forRoot()

],

providers: [],

bootstrap: [AppComponent]

})

 

We also need to import popup in /src/app/app.component.ts


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

 

How to Create Angular 4 Dialog Window

Now we will create a view of the dialog box which will appear on click event. For that, I’m creating a button. After clicking on this button, a pop will open. Go to /src/app/app.component.html and use the following code there.


<popup>

    This is Angular 4 PopUp

</popup>

<button type="button" class="btn btn-primary" (click)="ClickButton()">Primary</button>

 

In above code, you may have noticed, within button tag, I’m calling a function called ClickButton()  which will render Angular 4 dialog window on click event.

 

Now we will define ClickButton() function. We will do some styling and animation too. Head over to /src/app/app.component.ts and use the following code.


export class AppComponent {

  constructor(private popup:Popup) { }

ClickButton(){

   this.popup.options = {

   header: "Popup Header",

   color: "#5cb85c",

   widthProsentage: 40,

   animationDuration: 1,

   showButtons: true,

   confirmBtnContent: "OK",

   cancleBtnContent: "Close",

   confirmBtnClass: "btn btn-default",

   cancleBtnClass: "btn btn-default",

   animation: "fadeInDown",

};

 this.popup.show();

}

}

 

Final Code

/src/app/app.module.ts


import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

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

import { AppComponent } from './app.component';

@NgModule({

  declarations: [

    AppComponent

],

  imports: [

    BrowserModule,

    FormsModule,

    HttpModule,

    PopupModule.forRoot()

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

 

/src/app/app.component.html


<popup>

   This is Angular 4 PopUp

</popup>

<button type="button" class="btn btn-primary" (click)="ClickButton()">Primary</button>

 

/src/app/app.component.ts


import { Component } from '@angular/core';

import { Component } from '@angular/core';

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  constructor(private popup:Popup) { }

  ClickButton(){
    this.popup.options = {

    header: "Popup Header",

    color: "#5cb85c",

    widthProsentage: 40,

    animationDuration: 1,

    showButtons: true,

    confirmBtnContent: "OK",

    cancleBtnContent: "Close",

    confirmBtnClass: "btn btn-default",
 
    cancleBtnClass: "btn btn-default",

    animation: "fadeInDown"

  };

  this.popup.show();

}

}

 

Popup Screenshot

angular 4 dialog

Isn’t Easy to Integrate  Angular 4 Dialog window?

I hope you may have found Angular 4 popup implementation very easy. Please subscribe and share to help others. Also, let me know your thoughts via comment form.

 

Thanks!

 

Must Read: Step by Step Angular 4 Google Maps (AGM) Tutorial