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

ng2-ui-popup

October 22, 2017
Angular2 Popup(Modal) directive

Demo

https://ng2-ui.github.io/#/popup
Plunker Example: https://plnkr.co/edit/zaESbL?p=preview"

Note

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

Install

  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';  
        @NgModule({  
         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() {  
    this.popup.open(NguiMessagePopupComponent, {  
     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";  
             this.popup.close();  
            }  
          }  
        
    • 2. close() closes the currently opened popup. /ul>


Note: Special thanks to ng2-ui

Contact: allenhwkim@gmail.com

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