This project is looking for a new maintainer, see #414 for details.

Version 4.x.x contains some breaking changes, please see the CHANGELOG

Modal / Dialog implementation for angular.

• Easy to use API via Fluent API Presets (alert, prompt, confirm)
• Can render Component's, TemplateRef's and literal string
• Extendable via plugins.
• Easy to use

modal.alert()
    .title('Hello World')
    .body('In Angular')
    .open();

Available plugins:

• Bootstrap (3 & 4)
• Vex 3 & 4

npm install ngx-modialog

https://plnkr.co/edit/lV7zsw7Yqossgs9JOfQU?p=preview

https://plnkr.co/edit/2ppVYl517GI1Byv8vVbG?p=preview

In your application root module definition add ModalModule and the plugin you want to use:

We will use the bootstrap plugin (BootstrapModalModule) for this introduction.

import { ModalModule } from 'ngx-modialog';
import { BootstrapModalModule } from 'ngx-modialog/plugins/bootstrap';
// lots of code...
@NgModule({
  bootstrap: [ /* ... */ ],
  declarations: [ /* ... */ ],
  imports: [
    /* ... */
    ModalModule.forRoot(),
    BootstrapModalModule
  ],
})
export class AppModule { /* lots of code... */ }

In any angular component or service inject the Modal service and open a modal:

import { Component, ViewContainerRef } from '@angular/core';
import { Overlay } from 'ngx-modialog';
import { Modal } from 'ngx-modialog/plugins/bootstrap';
@Component({
  selector: 'my-app',
  template: `<button (click)="onClick()">Alert</button>`
})
export class AppComponent {
  constructor(public modal: Modal) { }
  onClick() {
    const dialogRef = this.modal.alert()
        .size('lg')
        .showClose(true)
        .title('A simple Alert style modal window')
        .body(`
            <h4>Alert is a classic (title/body/footer) 1 button modal window that 
            does not block.</h4>
            <b>Configuration:</b>
            <ul>
                <li>Non blocking (click anywhere outside to dismiss)</li>
                <li>Size large</li>
                <li>Dismissed with default keyboard key (ESC)</li>
                <li>Close wth button click</li>
                <li>HTML content</li>
            </ul>`)
        .open();
    dialogRef.result
        .then( result => alert(`The result is: ${result}`) );
  }
}

If you are using ngx-modialog version 3.X.X or below, open() returned a promise so replace the last 2 lines with:

   dialogRef
       .then( dialogRef => {
           dialogRef.result.then( result => alert(`The result is: ${result}`);
       });

We are using the alert() method, one of 3 (prompt, confirm)) fluent-api methods we call drop-ins

We then use the result property to wait for the modal closing event.

Notes:

• Fluent API methods (drop-ins) are pre-configured (presets) methods that allow easy configuration and execution, you can create custom presets - see the demo application.
• For more control use the open() method, which is used by all drop in's internally.
• We import the Modal service from the plugin and not from the root library. Import from the root should work but being explicit allow using multiple plugins.

The Demo application is a full implementation of the library with the native plugins.

View it at shlomiassaf.github.io/ngx-modialog

The demo application is part of this repository and it is a great place to learn by example.

• Customizable with components, Presets and more...
• Select cancel/quit key.
• Cascading modals.
• Element blocking.
• Blocking / Non blocking modal.
• Modal as a component, replace the content by supplying a custom component.

The demo application comes with a dynamic modal generator for the Boostrap plugin

Plugins serve as a concrete UI implementation for a modal.

It can be an implementation for a known library (e.g: bootstrap) or something completely unique

While ngx-modialog has some built in plugins it is also possible to use external plugins from NPM, if someone decide to build one.

Built a plugin? I would love to know :)

ref issue#111

To avoid this problem use event.stopPropagation(); or put the element removal inside a setTimeout call

As a sole author I find it difficult to maintain multiple open source projects. As a result it is hard for me to replay rapidly to requests/help/etc...

If you would like to contribute, please contact me, the community will thank you.

You can contribute via:

• Implementing features & Bug fixes
• Documentation (Extremely important)
• Issue management

Thank you!

Shlomi.