Angular Popup Modal Window Example

Veröffentlicht am: 12 Mai 2017
auf dem Kanal: 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...

Auf dieser Seite können Sie das Online-Video Angular Popup Modal Window Example mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer DotsWay 12 Mai 2017 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 180,546 Mal angesehen und es wurde von 432 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!