ngx-lazy-dialog: Lazy loading dialogs in Angular
Tags: angular, dialog, lazyloading, javascript
Published: 2021-10-11 12:48:31

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

<hr>

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:

![Alert displayed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9sicop9cln4scvnfo52.png)

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)](https://github.com/gesielrosa/gesielrosa-libs/blob/main/projects/ngx-lazy-dialog/README.md).

More examples:

![Custom alert dialog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4dg8uazulmehdlmcpbm9.png)
![Complex dialog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ob3hb20v95je0ti6mic.png)

<hr>

ngx-lazy-dialog - [NPM](https://www.npmjs.com/package/ngx-lazy-dialog) - [GitHub](https://github.com/gesielrosa/gesielrosa-libs/tree/main/projects/ngx-lazy-dialog)

Author: Gesiel Rosa - [GitHub](https://github.com/gesielrosa) - [LinkedIn](https://www.linkedin.com/in/gesielrosa/)