ng2-opd-popup
Popup component for Angular 2
Last updated 3 years ago by opdahlmann .
MIT · Original npm · Tarball · package.json
$ cnpm install ng2-opd-popup 
SYNC missed versions from official npm registry.

Popup component for Angular 2

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

Current Tags

  • 1.1.21                                ...           latest (3 years ago)

27 Versions

  • 1.1.21                                ...           3 years ago
  • 1.1.20                                ...           3 years ago
  • 1.1.19                                ...           3 years ago
  • 1.1.17                                ...           3 years ago
  • 1.1.16                                ...           3 years ago
  • 1.1.15                                ...           3 years ago
  • 1.1.14                                ...           3 years ago
  • 1.1.13                                ...           3 years ago
  • 1.1.12                                ...           3 years ago
  • 1.1.11                                ...           3 years ago
  • 1.1.10                                ...           3 years ago
  • 1.1.9                                ...           3 years ago
  • 1.1.8                                ...           3 years ago
  • 1.1.7                                ...           3 years ago
  • 1.1.6                                ...           3 years ago
  • 1.1.5                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
  • 0.0.9                                ...           3 years ago
  • 0.0.8                                ...           3 years ago
  • 0.0.7                                ...           3 years ago
  • 0.0.6                                ...           3 years ago
  • 0.0.5                                ...           3 years ago
  • 0.0.4                                ...           3 years ago
  • 0.0.3                                ...           3 years ago
  • 0.0.2                                ...           3 years ago
  • 0.0.1                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 1

Copyright 2014 - 2017 © taobao.org |