ng-modal-flexible

A simple, light-weight, highly customizable modal for Angular 2+ projects.

ng-modals-flexible allows you to create a fully functional modal in few lines of code. This modal is fully customizable with no pain and comes default with opening and closing animations.

Installation

npm install ng-modal-flexible --save

API

In the module app.module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
import { NgModalFlexibleModule } from 'ng-modal-flexible';
 
@NgModule({
  declarations: [ AppComponent ],
  imports: [ BrowserModule, NgModalFlexibleModule ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then, in the component where you have to call modal :

import { Component } from '@angular/core';
import { ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="modalOne.openModal()">Open Modal</button>
    <ng-modal-flexible 
      [modalConfig]="modalConfig"
      (modalClosed)="modalClosedFn()"
      (buttonOneClicked)="buttonOneClickedFn()"
      #modalOne>
    </ng-modal-flexible>
  `
})
export class AppComponent {

  // Second param for ViewChild is only needed for angular 8+
  @ViewChild('modalOne', {static: false}) modalOne; 
  modalConfig = { buttonOneText: 'OK', escapeToClose: true }

  modalClosedFn() { /* console.log(`modalClosedFn called !!`); */ }

  buttonOneClickedFn() {
    /* Drop your logic here */
    this.modalOne.closeModal();
  }

}

Properties for modalConfig

modalParentClass (string) : CSS class for modal's parent.
headingText (string) : Heading text for modal.
headingTextClass (string) : CSS class for heading text for modal.
showCloseBtn (boolean) : To show/hide close button. True by default.
closeBtnContent (string | HTML) : Content for close button. 'X' by default.
closeBtnClass (string) : CSS class for close button.
contentText (string) : Main content.
contentTextClass (string) : CSS class for main content.
buttonOneText (string) : Text for first button. Button will only be rendered if this has a value.
buttonOneClass (string) : CSS class for first button.
buttonTwoText (string) : Text for second button. Button will only be rendered if this has a value.
buttonTwoClass (string) : CSS class for second button.
buttonThreeText (string) : Text for third button. Button will only be rendered if this has a value.
buttonThreeClass (string) : CSS class for third button.
clickOutsideToClose (boolean) : To close/not close the modal clicking outside of it. True by default.
escapeToClose (boolean) : To close/not close the modal on escape key press.
showAnimation (boolean) : To show/hide opening and closing animation.

Events for modal

(buttonOneClicked) : Event will trigger on button 1 click.
(buttonTwoClicked) : Event will trigger on button 2 click.
(buttonThreeClicked) : Event will trigger on button 3 click.
(modalClosed) : Event will trigger on modal close.

All set to go !