Showing posts with label ng2-ui-popup. Show all posts
Showing posts with label ng2-ui-popup. Show all posts


October 22, 2017
Angular2 Popup(Modal) directive

Plunker Example:"


After 0.5.0 or higher, ng2-popup has been changed to @ngui/popup. Here are the changes
  • Module ng2-popup is changed to @ngui/popup.
  • Directive ng2-popup is changed to ngui-popup.
  • Class name Ng2PopupModule is changed to NguiPopupModule.
  • Components Ng2PopupComponent and Ng2MessagePopupComponent are changed to NguiPopupComponent and NguiMessagePopupComponent


  1. install @ngui/popup
     $ npm install @ngui/popup --save  
  2. add map and packages to your systemjs.config.js
     map['@ngui/popup'] = 'node_modules/@ngui/popup/dist/popup.umd.js';  
  3. import NguiPopupModule to your AppModule
  4.     import { NgModule } from '@angular/core';  
        import { FormsModule } from "@angular/forms";  
        import { BrowserModule } from '@angular/platform-browser';  
        import { AppComponent } from './app.component';  
        import { NguiPopupModule } from '@ngui/popup';  
         imports: [BrowserModule, FormsModule, NguiPopupModule],  
         declarations: [AppComponent],  
         bootstrap: [ AppComponent ]  
        export class AppModule { }  
For full example, please check out test directory to see the example of
  • systemjs.config.js
  • app.module.ts
  • and app.component.ts

Use it in your code

 <ngui-popup #popup></ngui-popup>  
To open/close popup from your component, add ViewChild line into your component
  export class AppComponent {   
   @ViewChild(NguiPopupComponent) popup: NguiPopupComponent;  
   openPopup() {, {  
     title: 'My Title',  
     message: 'My Message'  

NguiPopupCompoment Properties and functions

open(compoment, options)
opens popup with the given compnent and options
  • component: Component Any component. To open a message popup, use NguiMessagePopupComponent
    There are two properties will be added when a component is used with open function
    1. popup: instance of NguiPopupComponent, so that you can open and close the popup within your component
    2. popupOptions: options passed from open function
  • options
    • classNames: string of class names that will be use for popup. e.g. 'small', 'large', 'my-class', etc
    • closeButton: default true. if false, there will be no close button
    For NguiMessagePopupComponent
    • title: Title string
    • message: message string
    • buttons: button functions. e.g.
      •  {  
            OK: () => {  
             this.message = "Ok button is pressed";  
            CANCEL: () => {  
             this.message = "Cancel button is pressed";  
    • 2. close() closes the currently opened popup. /ul>

Note: Special thanks to ng2-ui


Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.