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 (click)="ref.close()">Close</button>
`
changeDetection: ChangeDetectionStrategy.OnPush
})
export class HelloWorldComponent {
constructor(public ref: DialogRef) {}
}
Inside the component, you'll have access to a DialogRef
provider. You can call its close()
method to close the current modal. You can also pass data
that'll be available for any subscribers to afterClosed$
.
Now we can use the DialogService
to open open the modal and display the component:
import { DialogService } from '@ngneat/dialog';
@Component({
template: `
<button (click)="open()">Open</button>
`
})
export class AppComponent implements OnInit {
constructor(private dialog: DialogService) {}
ngOnInit() {
const dialogRef = this.dialog.open(HelloWorldComponent);
}
}
The DialogRef
instance 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 aboolean
, anobservable
, or apromise
indicating whether the modal can be closed:
dialogRef.beforeClose(result => dialogCanBeClosed);
dialogRef.beforeClose(result => this.service.someMethod(result));
ref.data
- A reference to thedata
that is passed by the component opened in the modal:
import { DialogService, DialogRef } from '@ngneat/dialog';
@Component({
template: `
<h1>{{ ref.data.title }}</h1>
<button (click)="ref.close()">Close</button>
`
changeDetection: ChangeDetectionStrategy.OnPush
})
export class HelloWorldComponent {
constructor(public ref: DialogRef) {}
}
The library also provides the dialogClose
directive 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 [dialogClose]="result">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 <ng-template>
:
import { DialogService } from '@ngneat/dialog';
@Component({
selector: 'app-root',
template: `
<ng-template #modalTpl let-ref>
<h1>Hello World</h1>
<button (click)="ref.close()">Close</button>
</ng-template>
<button (click)="open(modalTpl)">Open</button>
`
})
export class AppComponent {
constructor(private dialog: DialogService) {}
open(tpl: TemplateRef<any>) {
this.dialog.open(tpl);
}
}
Note that in this case, you can access the ref
object by using the $implicit
context property.
Sometimes we need to pass data from the opening component to our modal component. In these cases, we can use the data
property, and use it to pass any data we need:
import { DialogService } from '@ngneat/dialog';
@Component({
template: `
<button (click)="open()">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.data
property.
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 ismd
).windowClass
- Add a custom class to the modal container.width
- Set a custom width (default unit ispx
).height
- Set a custom height (default unit ispx
).minHeight
- Set a custom min-height (default unit ispx
).maxHeight
- Set a custom max-height (default unit ispx
).container
- A custom element to which we append the modal (default isbody
).vcr
- A customViewContainerRef
to use.data
- Adata
object 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: '<h1>You Made It!!!</h1>'
});
this.dialog.error({
title: 'Oh no',
body: tpl
});
The body
type can be a string
, HTML string
, or a <ng-template>
.
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 sizes
option:
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 π» |
Ryan Hutchison π» π€ |
This project follows the all-contributors specification. Contributions of any kind welcome!
Logo made by itim2101 from www.flaticon.com