Angular Basic Modal

The angular-basic-modal is a lightweight, extendable Angular 2+ (2.3.0 and beyond) modal solution that will programatically create a modal, add it to the DOM, and then delete it from the DOM when the modal is dismissed. The modal returns a promise that indicates how the modal dismissed that can then be used for further processing.

A default modal style is provided that can be extended to create modals with any style sheet, including Bootstrap. A working demo shows the basic modal and two extended version (icon and Bootstrap 3) in action with user adjustable customizations.

How to use?

$ npm i angular-basic-modal --save 

Integration

The angular-basic-modal should work as-is with webpack/angular-cli. Just add the AngularBasicModalModule:

import { AngularBasicModalModule } from 'angular-basic-modal';  @NgModule({   imports: [ AngularBasicModalModule ],   ... }) export class AppModule { }

Usage

Basic usage is:

  bmc = new BaseModalConfig();    constructor(private modal:BasicModalService) { }    ...    ngOnInit() {     this.bmc.title = 'Hi There!';     this.bmc.message = "This is Eddie, your shipboard computer, and I'm " +       "feeling just great, guys, and I know I'm just going to get a " +       "bundle of kicks out of any program you care to run through me.";     this.bmc.width = 400;     this.bmc.height = 160;     this.bmc.cancelBtn = 'Great!';      setTimeout( () => {       this.modal.show(this.bmc, BaseModal).then( res => {         console.log(res);       });     }, 1500);   }

The BaseModalConfig contains the settings for the modal and is injected when the modal is created by calling show(config:BaseModalConfig, modal:Type<BaseModal>) on the BasicModalService. The modal loaded can either be the default BaseModal component or a component extending it. See the IconModal and BootstrapModal component in the demo for examples.

The following parameters are settable on the BaseModalConfig:

• title - HTML or text for the modal's title.
• message - HTML or text for the modal's body.
• blocking - whether or not the modal can be dismissed by clicking the overlay.
• confirmBtn - label of the optional confirm button. The confirmButton is associated with the confirm() function, which may optionally take a string to return via the modal's promise if clicked ( for example click('foo') would return 'foo' ). If no string is given for the confirm() function's parameter, then the confirmBtn label will be returned.
• cancelBtn - label of the cancel button, which is optional if not blocking. The cancelButton is associated with the cancel() function, which may optionally take a string to return via the modal's promise if clicked ( for example: click('bar') ). If no string is given for the cancel() function's parameter, then the cancelBtn label will be returned.
• width/height - (size) For the Bootstrap demo, the [ngClass] attribute on <div class="modal-dialog"> element uses the width to adjust the size according.

Extending

As noted above, the BaseModal can be extended. Here is a Webpack example for a Bootstrap styled modal.

The component:

import { Component } from '@angular/core'; import { BaseModal } from 'angular-basic-modal/base-modal.component'; import { BaseModalConfig } form 'angular-basic-modal/base-modal-config';  @Component({   selector: 'bs-modal',   templateUrl: './bootstrap-modal.component.html' }) export class BootstrapModalComponent extends BaseModal {   constructor(bmc:BaseModalConfig) {     super(bmc);   } }

The template:

<div class="modal" tabindex="-1" role="dialog" style="display:inherit;" (click)="dismiss('Dismiss')">   <div class="modal-dialog" (click)="$event.stopPropagation()">     <div class="modal-content">       <div class="modal-header">         <button type="button" class="close" data-dismiss="modal" (click)="cancel('Cancel')">           <span>&times;</span><span class="sr-only">Close</span>         </button>         <h4 class="modal-title" style="display:inline-block;" id="modal-title" [innerHTML]="title"></h4>       </div>       <div class="modal-body" [innerHTML]="message"></div>       <div class="modal-footer">         <button *ngIf="confirmBtn" type="button" class="btn btn-default" (click)="confirm()">           {{confirmBtn}}         </button>         <button *ngIf="cancelBtn" type="button" class="btn btn-primary" (click)="cancel()">           {{cancelBtn}}         </button>       </div>     </div>   </div> </div> <div class="modal-backdrop fade in"></div>`

The demo has an example for SystemJS. Namely the difference is in how BaseModalConfig and BaseModal are imported.

import { BaseModalConfig, BaseModal } from 'angular-basic-modal';

License

MIT

Author

• David Czeck @czeckd