angular2-modal
)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.
modal.alert()
.title('Hello World')
.body('In Angular')
.open();
Available plugins:
npm install ngx-modialog
http://plnkr.co/edit/lV7zsw7Yqossgs9JOfQU?p=preview
http://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:
open()
method, which is used by all drop in's internally.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.
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:
Thank you!
Shlomi.