ng6-popup-boxes v1.0.3
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.
import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { PopupBoxesModule } from 'ng6-popup-boxes'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, BrowserAnimationsModule, PopupBoxesModule.forRoot()], providers: [], bootstrap: [AppComponent] }) export class AppModule {}
Inject 'PopupManager' class in your component class.
import { Component } from '@angular/core'; import { PopupManager } from './ng6-popup-boxes'; @Component({ selector: "app-loading", template: ` <div> <svg class="circle-loader progress" width="40" height="40" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="20" cy="20" r="15"></circle> </svg> </div> <h4>Loading....</h4> ` }) export class LoadingComponent { } @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { constructor(public popupManager: PopupManager) {} showAlertBox() { this.popupManager.open( 'Alert Box', "Let's go up in here, and start having some fun The very fact that you're aware of suffering is enough reason to be overjoyed that you're alive and can experience it. It's a super day, so why not make a beautiful sky? ", { width: '300px', popupClass: 'my-popup-box', animate: 'slide-from-top', showOverlay: true, position: 'top', callback: (result: any) => { if (result) { this.customDialog('You clicked Ok'); } else { this.customDialog('You clicked Cancel'); } } } ); } customDialog(message: any) { this.popupManager.open('Custom Dialog', message, { width: '300px', position: 'bottom', animate: 'scale', actionButtons: [ { text: 'Done', buttonClasses: 'btn-ok' } ] }); } showConfirmBox() { this.popupManager.open('Delete Confirmation', 'Do you really want to this item?', { width: '300px', closeOnOverlay: false, animate: 'scale', actionButtons: [ { text: 'Yes', buttonClasses: 'btn-ok', onAction: () => { return true; } }, { text: 'No', buttonClasses: 'btn-cancel', onAction: () => { return false; } } ], callback: (result: any) => { if (result) { this.showLoadingBox(); } } }); } showLoadingBox() { let popup = this.popupManager.open('', '', { width: '250px', injectComponent: LoadingComponent, showTitle: false, showMessage: false, showCloseBtn: false, closeOnOverlay: false, animate: 'slide-from-bottom', actionButtons: [], callback: (result: any) => { if (result) { this.deleteSuccessBox(); } } }); // some async call & then close setTimeout(() => { popup.close(true); }, 2000); } deleteSuccessBox() { this.popupManager.open('Success', 'Record has been deleted successfully !', { width: '300px', animate: 'slide-from-top', position: 'top', actionButtons: [ { text: 'Done', buttonClasses: 'btn-ok' } ] }); } } ``` ### 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
```javascript actionButtons: [ { text: 'Cancel', buttonClasses: 'btn-cancel', onAction: () => { return false; } }, { text: 'Ok', buttonClasses: 'btn-ok', onAction: () => { 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
callback: (result: any) => { if (result) { alert('You clicked Ok'); } else { alert('You clicked Cancel'); } }
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