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