@ngx-toolset/lazy-dialogs v1.0.0

@ngx-toolset/lazy-dialogs

Table of Contents

• @ngx-toolset/lazy-dialogs
  • Features
  • Installation
  • Usage
    • Dialog Container and Background Overlay Styles
    • Standalone Component
    • Open Standalone Component Dialog
    • NgModule Extending ModuleWithLazyDialog<T>
    • Open Dialog Contained In NgModule

Features

• Creates (opens) a dialog via lazy loading so that the dialog component and module aren't part of the Angular app's main bundle. That reduces your Angular app's bundle size. Works with NgModules extending ModuleWithLazyDialog<T> as well as standalone components.

Installation

ng add @ngx-toolset/lazy-dialogs

Usage

Dialog Container and Background Overlay Styles

Provide your own CSS styles for the dialog's container which can also act as the dialog's background overlay to the forRoot function of the LazyDialogModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LazyDialogModule } from '@ngx-toolset/lazy-dialogs';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    LazyDialogModule.forRoot({
      // Sample CSS styles
      position: 'fixed',
      left: 0,
      right: 0,
      bottom: 0,
      top: 0,
      'background-color': '#000000',
      opacity: 0.7,
      'z-index': 1000,
      width: '100%',
      height: '100%'
    }),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Standalone Component

Sample standalone component:

import { Component } from '@angular/core';
import { LazyDialogRef } from '@ngx-toolset/lazy-dialogs';

@Component({
  selector: 'app-standalone-dialog-component',
  standalone: true,
  template: '<button (click)="onCloseClicked()">Mark as successful</button>',
})
export class StandaloneDialogComponent {
  public data: { firstName: string, lastName: string };

  public constructor(private dialogRef: LazyDialogRef<{ firstName: string, lastName: string }>) {
    this.data = this.dialogRef.data;
  }

  public onCloseClicked(): void {
    this.dialogRef.close({ succeeded: true });
  }
}

Open Standalone Component Dialog

Sample component:

import { Component } from '@angular/core';
import { LazyDialogService } from '@ngx-toolset/lazy-dialogs';

@Component({
  selector: 'app-open-standalone-dialog-component',
  template: '<button (click)="onOpenDialogClicked()">Open dialog</button>',
})
export class OpenStandaloneDialogComponent {
  public constructor(private lazyDialogService: LazyDialogService) {}

  public async onOpenDialogClicked(): Promise<void> {
    const componentType = import('../standalone-dialog/standalone-dialog.component')
      .then(c => c.StandaloneDialogType);

    const dialogRef = this.lazyDialogService.create(
      componentType,
      {
        test: 'data',
      }
    );

    const dialogOutput = await dialogRef.onClose();
    // Do sth. with the dialog output.
  }
}

NgModule Extending ModuleWithLazyDialog<T>

Sample component:

import { Component } from '@angular/core';
import { LazyDialogRef } from '@ngx-toolset/lazy-dialogs';

@Component({
  selector: 'app-dialog-with-module-component',
  template: '<button (click)="onCloseClicked()">Close</button>',
})
export class DialogWithModuleComponent {
  public data: { emailAddress: string };

  public constructor(private dialogRef: LazyDialogRef<{ emailAddress: string }>) {
    this.data = this.dialogRef.data;
  }

  public onCloseClicked(): void {
    this.dialogRef.close();
  }
}

Sample NgModule:

import { NgModule } from '@angular/core';
import { DialogWithModuleComponent } from './dialog-with-module.component';
import { ModuleWithLazyDialog } from '@ngx-toolset/lazy-dialogs';

@NgModule({
  declarations: [DialogWithModuleComponent],
})
export class DialogWithModuleComponentModule extends ModuleWithLazyDialog<DialogWithModuleComponent> {
  public getDialog(): typeof DialogWithModuleComponent {
    return DialogWithModuleComponent;
  }
}

Open Dialog Contained In NgModule

Sample component:

import { Component } from '@angular/core';
import { LazyDialogService } from '@ngx-toolset/lazy-dialogs';

@Component({
  selector: 'app-open-dialog-with-module-component',
  template: '<button (click)="onOpenDialogClicked()">Open dialog</button>',
})
export class OpenDialogWithModuleComponent {
  public constructor(private lazyDialogService: LazyDialogService) {}

  public async onOpenDialogClicked(): Promise<void> {
    const moduleType = import('../dialog-with-module-component/dialog-with-module-component.module')
      .then(m => m.DialogWithModuleComponentModule);

    const dialogRef = this.lazyDialogService.create(
      moduleType,
      {
        test: 'data',
      }
    );

    const dialogOutput = await dialogRef.onClose();
    // Do sth. with the dialog output.
  }
}