Angular Popup Modal Window Example

Published: 12 May 2017
on channel: DotsWay

180,546

432

In this video we will be creating angular 4 popup window modal by creating a button which will click trigger the popup window function.

This popup window example will work on both angular 4 and angular 2.

How to Install Angular 4 and Create your First Project:

QuickStart - Part 1:
https://goo.gl/pS4eEz

In module file:
import {PopupModule} from 'ng2-opd-popup'

imports: [
.....
.............
PopupModule.forRoot(),],

Html should have a button with click even which will trigger the window modal

Component.ts
import {Popup} from 'ng2-opd-popup';

constructor (private popup:Popup) { }

ClickButton () {

this.popup.options= {
color: "red"

}

this.popup.show();
}

Available options:

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'
};

Angular 4 Structure:
https://goo.gl/6J22gr

How to Create a Component in Angular 4 :
https://goo.gl/493WD6

Angular 4 Simple Binding:
https://goo.gl/aaiqxd

Written tutorial
------------------------

Angular 4 Popup Window

Create Angular Popup Modal
Click here for video tutorial
In this Angular modal tutorial we will be creating Angular 4 popup window modal by creating a button which will trigger the popup window function.

First open CMD and run:

npm install ng2-opd-popup
app.module.ts

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

imports: [
PopupModule.forRoot(),
],

app.component.ts

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

Check the rest at:
http://dotsway.com/2017/05/16/angular...

On this page of the site you can watch the video online Angular Popup Modal Window Example with a duration of hours minute second in good quality, which was uploaded by the user DotsWay 12 May 2017, share the link with friends and acquaintances, this video has already been watched 180,546 times on youtube and it was liked by 432 viewers. Enjoy your viewing!

302