👻 A simple to use, highly customizable, and powerful modal for Angular Applications
A simple to use, highly customizable, and powerful modal for Angular Applications
✅ TemplateRef/Component Support
✅ Dialog Guards Support
✅ Resizable
✅ Draggable
✅ Multiple Dialogs Support
✅ Built-in Confirm/Success/Error Dialogs
✅ Customizable
From your project folder, run:
ng add @ngneat/dialog
This command will import the
DialogModule.forRoot()in your
AppModule:
import { DialogModule } from '@ngneat/dialog';@NgModule({ declarations: [AppComponent], imports: [DialogModule.forRoot()], bootstrap: [AppComponent] }) export class AppModule {}
First, create the component to be displayed in the modal:
import { DialogService, DialogRef } from '@ngneat/dialog';@Component({ template:
<h1>Hello World</h1> <button>Close</button>
changeDetection: ChangeDetectionStrategy.OnPush }) export class HelloWorldComponent { constructor(public ref: DialogRef) {} }
Inside the component, you'll have access to a
DialogRefprovider. You can call its
close()method to close the current modal. You can also pass
datathat'll be available for any subscribers to
afterClosed$.
Now we can use the
DialogServiceto open open the modal and display the component:
import { DialogService } from '@ngneat/dialog';@Component({ template:
<button>Open</button>
}) export class AppComponent implements OnInit { constructor(private dialog: DialogService) {}ngOnInit() { const dialogRef = this.dialog.open(HelloWorldComponent); } }
The
DialogRefinstance exposes the following API:
afterClosed$- An observable that emits after the modal closes:
const dialogRef = this.dialog.open(HelloWorldComponent); dialogRef.afterClosed$.subscribe(result => { console.log(`After dialog has been closed ${result}`); });
backdropClick$- An observable that emits when the user clicks on the modal backdrop:
const dialogRef = this.dialog.open(HelloWorldComponent); dialogRef.backdropClick$.subscribe(() => { console.log('Backdrop has been clicked'); });
beforeClose- A guard that should return a
boolean, an
observable, or a
promiseindicating whether the modal can be closed:
dialogRef.beforeClose(result => dialogCanBeClosed); dialogRef.beforeClose(result => this.service.someMethod(result));
ref.data- A reference to the
datathat is passed by the component opened in the modal:
import { DialogService, DialogRef } from '@ngneat/dialog';@Component({ template:
<h1>{{ ref.data.title }}</h1> <button>Close</button>
changeDetection: ChangeDetectionStrategy.OnPush }) export class HelloWorldComponent { constructor(public ref: DialogRef) {} }
The library also provides the
dialogClosedirective helper, that you can use to close the modal:
import { DialogService, DialogRef } from '@ngneat/dialog';@Component({ template:
<h1>Hello World</h1> <button dialogclose>Close</button> <button>Close with result</button>
}) export class HelloWorldComponent {}
Sometimes it can be overkill to create a whole component. In these cases, you can pass a reference to an
:import { DialogService } from '@ngneat/dialog';@Component({ selector: 'app-root', template: `
Hello World
<button>Close</button> </ng-template> <button>Open</button>
` }) export class AppComponent { constructor(private dialog: DialogService) {}
open(tpl: TemplateRef) { this.dialog.open(tpl); } }
Note that in this case, you can access the
refobject by using the
$implicitcontext property.
Sometimes we need to pass data from the opening component to our modal component. In these cases, we can use the
dataproperty, and use it to pass any data we need:
import { DialogService } from '@ngneat/dialog';@Component({ template:
<button>Open</button>
}) export class AppComponent implements OnInit { private id = '...';constructor(private dialog: DialogService) {}
ngOnInit() { const dialogRef = this.dialog.open(HelloWorldComponent, { data: { id: this.id } }); } }
Now we can access it inside our modal component or template, by using the
ref.dataproperty.
id- The modal unique id (defaults to random id).
closeButton- Whether to display an 'X' for closing the modal (default is true).
enableClose- Whether a click on the backdrop should close the modal (default is true).
backdrop- Whether to show the backdrop element (default is true).
resizable- Whether the modal show be resizeable (default is false).
draggable- Whether the modal show be draggable (default is false).
size- Set the modal size according to your global custom sizes (default is
md).
windowClass- Add a custom class to the modal container.
width- Set a custom width (default unit is
px).
height- Set a custom height (default unit is
px).
minHeight- Set a custom min-height (default unit is
px).
maxHeight- Set a custom max-height (default unit is
px).
container- A custom element to which we append the modal (default is
body).
vcr- A custom
ViewContainerRefto use.
data- A
dataobject that will be passed to the modal template or component.
this.dialog.open(compOrTemplate, { id: string, closeButton: boolean, enableClose: boolean, backdrop: boolean, resizable: boolean, draggable: boolean, size: sm | md | lg | fullScreen | string, windowClass: string, width: string | number, height: string | number, minHeight: string | number, maxHeight: string | number });
The library provides built-in modals for common cases where we need to show a confirmation message, a success message, or an error message:
this.dialog .confirm({ title: 'Are you sure?', body: 'This action cannot be undone.' }) .afterClosed$.subscribe(confirmed => console.log(confirmed));this.dialog.success({ title: 'Hurray!', body: '
You Made It!!!
' });this.dialog.error({ title: 'Oh no', body: tpl });
The
bodytype can be a
string,
HTML string, or a .
You can also change the default dialogs, and use your own:
import { DialogModule } from '@ngneat/dialog';@NgModule({ declarations: [AppComponent], imports: [ DialogModule.forRoot({ success: { component: AppSuccessDialog }, confirm: { component: AppConfirmDialog }, error: { component: AppErrorDialog } }) ], bootstrap: [AppComponent] }) export class AppModule {}
You can define the modal sizes globally by using the
sizesoption:
import { DialogModule } from '@ngneat/dialog';@NgModule({ declarations: [AppComponent], imports: [ DialogModule.forRoot({ sizes: { sm: { width: 300, // 300px minHeight: 250 // 250px }, md: { width: '60vw', height: '60vh' }, lg: { width: '90vw', height: '90vh' }, fullScreen: { width: '100vw', height: '100vh' }, stretch: { minHeight: 500, maxHeight: '85%' } } }) ], bootstrap: [AppComponent] }) export class AppModule {}
You can customize the styles with these classes:
ngneat-dialog { .ngneat-dialog-backdrop { // backdrop styles .ngneat-dialog-content { // dialog content, where your component/template is placed .ngneat-drag-marker { // draggable marker } .ngneat-close-dialog { // 'X' icon for closing the dialog } .ngneat-dialog-primary-btn, .ngneat-dialog-secondary-btn { // the default dialogs action buttons } } } }
Thanks goes to these wonderful people (emoji key):
Toni Villena 💻 🚇 ⚠️ |
Netanel Basal 📖 🤔 💻 |
Inbal Sinai 📖 |
Shahar Kazaz 💻 📖 |
beeman 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
Logo made by itim2101 from www.flaticon.com