1.1.21 • Published 7 years ago
ng2-opd-popup v1.1.21
Popup component for Angular 2
- ONLINE DEMO
- Source code for demo project HERE
in your module include:
import {PopupModule} from 'ng2-opd-popup';
@NgModule({
imports: [
...
PopupModule.forRoot()
],
declarations: [
...
],
providers: [
...
],
bootstrap: [...]
})
in your view (html)
<popup>
Add your custom html elements here
</popup>
In your component:
import {Popup} from 'ng2-opd-popup';
export class YourComponent {
constructor(private popup:Popup) { }
ClickButton(){
this.popup.show();
}
}
If you want to have multiple popups in your page with different html content you can use @ViewChild, in that case you don't need to inject it in your constructor
in your view (html)
<popup #popup1>
Add your custom html elements here
</popup>
<popup #popup2>
Add your other custom html elements here
</popup>
In your component:
import { Component, ViewChild } from '@angular/core';
import {Popup} from 'ng2-opd-popup';
export class YourComponent {
@ViewChild('popup1') popup1: Popup;
@ViewChild('popup2') popup2: Popup;
constructor() { }
ClickButton(){
this.popup1.show();
}
ClickAnotherButton(){
this.popup2.show();
}
}
Options:
You can set the following options for your popup:
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'
};
this.popup.show(this.popup.options);
Events:
You can subscribe to the confirm and cancel button event.
<popup (confirmClick)="YourConfirmEvent()" (cancelClick)="YourCancelEvent()">
Add your own html elements here
</popup>
YourConfirmEvent(){
alert('You cliked confirm');
}
YourCancelEvent(){
alert('You cliked cancel');
}
1.1.21
7 years ago
1.1.20
7 years ago
1.1.19
7 years ago
1.1.17
7 years ago
1.1.16
7 years ago
1.1.15
7 years ago
1.1.14
7 years ago
1.1.13
7 years ago
1.1.12
7 years ago
1.1.11
7 years ago
1.1.10
7 years ago
1.1.9
7 years ago
1.1.8
7 years ago
1.1.7
7 years ago
1.1.6
7 years ago
1.1.5
7 years ago
1.0.1
7 years ago
1.0.0
7 years ago
0.0.9
7 years ago
0.0.8
7 years ago
0.0.7
7 years ago
0.0.6
7 years ago
0.0.5
7 years ago
0.0.4
7 years ago
0.0.3
7 years ago
0.0.2
7 years ago
0.0.1
7 years ago