ng2-popups

Angular 2 popups

Usage no npm install needed!

<script type="module">
  import ng2Popups from 'https://cdn.skypack.dev/ng2-popups';
</script>

README

npm version

NPM

ng2-popups

Popups for angular 2 : load dynamically your components into a popup. Minimal style and html for easy personalization. This library use ng2-component-injector. See example/ if needed.

Install

npm install ng2-popups --save
@NgModule({
    providers: [PopupModule],
    declarations: [ /* Put here your components to be injected */ ],
    entryComponents: [ /* Put here your components to be injected */  ],
})
export class AppModule { }

And put <utx-popups></utx-popups> into your main component template.

Into your SystemJs config you'll need to put :

packages: {
    'ng2-component-injector', {
        main: 'bundles/ng2-component-injector.js',
        defaultExtension: 'js'
    }
}

Documentation

PopupService

open

open(config: any):Promise<PopupComponent>>

Open a new popup and inject a component inside. Return a promise resolved when the popup is opened.

config :

{
    component: any; // the component to inject
    inputs?:any; // {Object} the inputs to pass to the component
    outputs?:any; // {Object} the outputs to listen to the component
}

close

close(popup: PopupComponent):Promise<any>

Close a popup. Return a promise resolved when the popup is closed.

closeAll

closeAll():Promise<any>

Close all popups. Return a promise resolved when all popups are closed.

PopupComponent

close

close():Promise<any>

Close the popup. Return a promise resolved when the popup is closed.

closePromise

closePromise:Promise<any>

A promise resolved when the popup is closed.

element

element:HTMLElement

The DOM element of the popup (can be use to add class, etc...).