@greg-md/ng-popup v1.0.0

Popup for Angular2

Display a popup with Angular2.

Installation

npm install @greg-md/ng-popup --save

Setting up in a module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// 1. Import popup module.
import { PopupModule } from '@greg-md/ng-popup';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    // 2. Register popup module.
    PopupModule,
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Using in templates

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <a tabindex="0" (click)="displayPopup = true"></a>

    <gg-popup (overlay)="displayPopup = false" *ngIf="displayPopup">
        Hello! I am a popup.
    </gg-popup>
  `,
})
export class AppComponent { }

Component attributes

marginTop

By default popup has fixed and centered position. If the popup height is bigger than the view height, popup will have this margin top.

Example:

<gg-popup marginTop="20">
  Hello! I am a popup.
</gg-popup>

Component events

overlay

This event is fired when you click on the popup overlay.

Example:

<gg-popup (overlay)="closeThePopup()">
  Hello! I am a popup.
</gg-popup>

License

MIT © Grigorii Duca