https://github.com/ng2-ui/ng2-popup

Angular2 Modal Directive
https://github.com/ng2-ui/ng2-popup

Last synced: about 21 hours ago
JSON representation

Angular2 Modal Directive

• Host: GitHub
• URL: https://github.com/ng2-ui/ng2-popup
• Owner: ng2-ui
• License: mit
• Created: 2016-07-03T00:47:13.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-12-18T15:25:08.000Z (almost 7 years ago)
• Last Synced: 2024-05-21T15:17:36.347Z (7 months ago)
• Language: TypeScript
• Homepage: https://ng2-ui.github.io/#/popup
• Size: 1.43 MB
• Stars: 11
• Watchers: 6
• Forks: 7
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-angular-components - ng2-popup - Angular2 Modal Directive (Uncategorized / Uncategorized)

README

        
# popup

Angular2 Popup(Modal) directive

## IMPORTANT: NOT-MAINTAINED

Accepting volunteers and ready to transfer ownership.



  



Plunker Example: https://plnkr.co/edit/zaESbL?p=preview"

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

        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

    ,

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'

          }

          ..

        }

      }

## **ng2-ui** welcomes new members and contributors

This module is only improved and maintained by contributors like you.

As a contributor, it's NOT required to be skilled in Javascript nor Angular2. 

You are only to be open-minded and interested in helping others.

As a contributor, you do following;

  * Updating README.md

  * Improving code comments

  * Answering issues and building FAQ

  * Documentation

  * Translation

In result of your active contribution, you will be listed as a core contributor

on https://ng2-ui.github.io, and a member of ng2-ui too.

If you are interested in becoming a contributor and/or a member of ng-ui,

please send me email to `allenhwkim AT gmail.com` with your github id. 

### NguiPopupCompoment Properties and functions

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

 

## For Developers

### To start

    $ git clone https://github.com/ng2-ui/popup.git

    $ cd popup

    $ npm install

    $ npm start

## Run locally and test it

1. build and run 

      For Windows Environment (in CMD)

          $ .\build.cmd

    

      For Mac Environment (in terminal)

          $  ./build.sh

2. start the server

      $ npm start