ngx-popups v1.2.0
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
.