ngx-popups

Popups for angular 5+ : load dynamically your components into a popup. Minimal style and html for easy personalization. This library use ngx-dom-component. Moreover to be compatible with internet explorer and edge you could be interested to use events-polyfill, because ngx-popups use 'once' property of addEventListener.

See example/ if needed.

Install

npm install --save ngx-popups ngx-dom-component events-polyfill

@NgModule({
    providers: [NgxPopupModule],
    declarations: [ /* Put here your components to be injected */ ],
    entryComponents: [ /* Put here your components to be injected */  ],
})
export class AppModule { }

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

Into your SystemJs config you'll need to put :

packages: {
    'ngx-popups', {
        main: 'path_to/ngx-popups.js',
        defaultExtension: 'js'
    },
    'ngx-dom-component', {
        main: 'path_to/ngx-dom-component.js',
        defaultExtension: 'js'
    }
}

Style (scss or css)

This package comes with a minimal style that you can include with :

@import 'node_modules/ngx-popups/style';

or

<link rel="stylesheet" type="text/css" href="/node_modules/ngx-popups/style.css">

Documentation

NgxPopupService

open

open(config: IPopupConfig, waitTransitionEnd: boolean = true, detail?: any, managerId?: string): Promise<NgxPopupComponent>

Opens a new popup and inject a component inside. Returns a promise resolved when the popup is opened.

config :

{
    componentType: any; // the component to inject
    inputs?: { [key: string]: any; }; // the inputs to pass to the component
    outputs?: { [key: string]: Function;}; // the outputs to listen to the component
}

waitTransitionEnd (default true) : if true wait the end of the animation before triggering open/resolving promise. detail : provide data to the detail property of the custom event open. managerId : in case of many managers, you can provide a specific manager id.

close

close(popup: NgxPopupComponent, waitTransitionEnd: boolean = true, detail?: any): Promise<void>;

Closes a popup. Returns a promise resolved when the popup is closed.

closeAll

closeAll(managerId?: string): Promise<void>;

Closes all popups. Returns a promise resolved when all popups are closed.

NgxPopupComponent

close

close(waitTransitionEnd: boolean = true, detail?: any): Promise<void>

Closes the popup. Returns a promise resolved when the popup is closed.

contentInstance

 readonly contentInstance: any;

Returns the instance of the injected component.

element

readonly element: HTMLElement;

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

closable

get/set closable: boolean;

Allow/Disallow close for the popup.

backgroundClosable

get/set backgroundClosable: boolean;

Allow/Disallow close for the popup when clicking on the background.

EventTarget The NgxPopupComponent inherits of all methods of EventTarget. It includes :

• addEventListener
• dispatchEvent
• removeEventListener

The following events are available :

• close : after the popup is closed (including transition or not, according to 'waitTransitionEnd').
• beforeclose : when the close method is called. Use event.preventDefault() to cancel close.
• cancelopen : when an open is cancelled (ex: while animating, the popup is in a 'opening' state, if you call close before animation is complete, it cancels the open).

All of them are CustomEvent, with a detail property that you can set when calling open or close.