ng6-popup-boxes

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

  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

[Ng6 Popup Demo Link] (http://technoidlab.com/demos/ng6-popup-boxes)

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