DEV Community

Cover image for ngx-lazy-dialog: Lazy loading dialogs in Angular
Gesiel Rosa
Gesiel Rosa

Posted on

ngx-lazy-dialog: Lazy loading dialogs in Angular

Create lazy load and fully customized dialogs in Angular with ngx-lazy-dialog


Install dependencies:

npm install ngx-lazy-dialog --save
Enter fullscreen mode Exit fullscreen mode

Generate dialog component and dialog module:

ng g module dialogs/alert
ng g component dialogs/alert
Enter fullscreen mode Exit fullscreen mode

How was the structure:

app   
└───dialogs
│   │   alert
│   │   │   alert.component.html
│   │   │   alert.component.css
│   │   │   alert.component.ts
│   │   │   alert.module.ts
Enter fullscreen mode Exit fullscreen mode

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 {
  }

}
Enter fullscreen mode Exit fullscreen mode

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 {
}
Enter fullscreen mode Exit fullscreen mode

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
  }**
}
Enter fullscreen mode Exit fullscreen mode

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 {
}
Enter fullscreen mode Exit fullscreen mode

alert.component.html

<p>alert works!</p>
<button (click)="close()">Close</button>
<button (click)="close({bar: 'foo'})">Close with callback</button>
Enter fullscreen mode Exit fullscreen mode

(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);
}
...
Enter fullscreen mode Exit fullscreen mode

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);
  });

}
...
Enter fullscreen mode Exit fullscreen mode

And there is the component being displayed inside the modal:

Alert displayed

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:

Custom alert dialog
Complex dialog


ngx-lazy-dialog - NPM - GitHub

Author: Gesiel Rosa - GitHub - LinkedIn

Top comments (0)