Angular Popup Modal Window Example

Опубликовано: 05 Апрель 2025
на канале: dotsway

180,445

438

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...