Create lazy load and fully customized dialogs in Angular with ngx-lazy-dialog
Install dependencies:
npm install ngx-lazy-dialog --save
Generate dialog component and dialog module:
ng g module dialogs/alert
ng g component dialogs/alert
How was the structure:
app
└───dialogs
│ │ alert
│ │ │ alert.component.html
│ │ │ alert.component.css
│ │ │ alert.component.ts
│ │ │ alert.module.ts
Component and module created:
alert.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-alert',
templateUrl: './alert.component.html',
styleUrls: ['./alert.component.scss']
})
export class AlertComponent implements OnInit {
constructor() {
}
ngOnInit(): void {
}
}
alert.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AlertComponent } from './alert.component';
@NgModule({
declarations: [
AlertComponent
],
imports: [
CommonModule
]
})
export class AlertModule {
}
Let’s prepare the component to be called by the lazy dialog service:
(What is highlighted has been added)
alert.component.ts
import { Component, OnInit } from '@angular/core';
**import { LazyDialog } from 'ngx-lazy-dialog';**
@Component({
selector: 'app-alert',
templateUrl: './alert.component.html',
styleUrls: ['./alert.component.scss']
})
export class AlertComponent **extends LazyDialog** implements OnInit {
constructor() {
**super();**
}
ngOnInit(): void {
}
**onParams(params: any): void {
console.log(params); // receiving parameters
}**
}
alert.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AlertComponent } from './alert.component';
@NgModule({
declarations: [
AlertComponent
],
imports: [
CommonModule
],
bootstrap: [
AlertComponent
]
})
export class AlertModule {
}
alert.component.html
<p>alert works!</p>
<button (click)="close()">Close</button>
<button (click)="close({bar: 'foo'})">Close with callback</button>
(You can modify the component content as you wish. Here only two buttons were added as an example of how to close the dialog without and with a callback.)
Let’s open a dialog loading the alert component created earlier:
...
import { LazyDialogService } from 'ngx-lazy-dialog';
...
constructor(private _service: LazyDialogService) {
}
...
openDialog(): void {
const component = import('./dialogs/alert/alert.module').then(m => m.AlertModule);
this._service.create(component);
}
...
Here is a more complete example, passing parameters and expecting a callback:
...
async openDialog(): Promise<void> {
const component = import('./dialogs/alert/alert.module').then(m => m.AlertModule);
const params = {
foo: 'bar'
};
const dialog = await this._service.create(component, params);
dialog.onClose().then(callbackResult => {
console.log(callbackResult);
});
}
...
And there is the component being displayed inside the modal:
Remembering that the content of the modal is you who create.
In this example something simple was created, but you can create from simple alerts to complex forms.
There is also the possibility to customize the modal container, using css variables (See documentation).
More examples:
Top comments (0)