Angular 6 Popup Module
NOTE : Tested with Angular v6.0.0 and Angular-Cli v6.0.0.
Usage
-
Install ng6-popup-boxes using npm:
$ npm install ng6-popup-boxes --save -
Add PopupBoxesModule into your AppModule class. app.module.ts would look like this: Take Note : For Toastr Animations working perfectly please import BrowserAnimationsModule into app.module.ts file.
;;;;;@{} -
Inject 'PopupManager' class in your component class.
;;@@{}{thispopupManager;}{thispopupManager;}{thispopupManager;}{let popup = thispopupManager;// some async call & then close;}{thispopupManager;}
### Popup Configurations
-
width : It applies width to popup box. Default : 600px
-
popupClass : It add class to popup box. Default : popup-box
-
showTitle : Wheather to show title or not. Default : true
-
showMessage : Wheather to show message or not. Default : true
-
showCloseBtn : Wheather to show close button or not. Default : true
-
injectComponent : Inject external component into popup box. Default : void 0 Note: injectComponent must be included into entryComponents of NgModule.
-
actionButtons : It shows action buttons on popup box. Default
actionButtons:text: 'Cancel'buttonClasses: 'btn-cancel'{return false;}text: 'Ok'buttonClasses: 'btn-ok'{return true;} -
animate : It applies animation to popup box. Possible values are slide-from-left | slide-from-right | slide-from-top | slide-from-bottom | fade | scale. Default: slide-from-right
-
position : It applies animation to popup box. Possible values are top | center | bottom. Default: center
-
showOverlay - Wheather to show overlay or not. Default : true
-
closeOnOverlay - It allows close on overlay by clicking on it. Default: true
-
callback - It allows to capture event when clicking on any action buttons. Example
{if result;else;}
Demo App Link
How to Run demo app
angular-cli
$ cd demo/ngcli && npm install
$ ng serve
Then navigate your browser to http://localhost:4200
webpack
$ cd demo/webpack && npm run install
$ npm run build
$ npm start