Angular popup module
An angular module to display popup on screen, supported by angular >= 4.0.0
$ npm install @clementvh/angular-popup
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PopupModule } from '@clementvh/angular-popup';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
PopupModule
],
declarations: [
AppComponent
],
entryComponents: [MyComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
<ng-popup></ng-popup>
<h1>App Component</h1>
import { Component } from '@angular/core';
import { PopupService } from '@clementvh/angular-popup';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
constructor(public popupService: PopupService) {}
}
this.popupService.openHtml(MyComponent, {
id: 'toto-popup'
});
Open a popup with the given component inside
/**
* @param {Type<any>} component The component to instatiate in the popup.
* @param {Object} options Options given to the popup.
*/
openHtml(component: Type<any>, options: any = {}): void;
Open a popup confirm with the given title and text and two buttons at the bottom ‘Cancel’ and ‘Confirm’
/**
* @param {string} title The popup's title.
* @param {string} text The popup(s content text.
* @param {Object} options Options given to the popup.
*/
openConfirm(title: string, text: string, options: any = {}): void;
Open a popup with an iframe to the given url
/**
* @param {string} url The url for the iframe
* @param {Object} options Options given to the popup.
*/
openIframe(url: string, options: any = {}): void;
Options object should be a type of PopupOptions
interface. The object may have following properties:
.app-popup-container
block.false
clicking outside the popup won’t close it.false
the close icon won’t be displayed.