ng-lazy-load-component

NgLazyLoadComponent

Lazy load Angular component into HTML template.

Description

This library help to lazy load Angular component dynamically and render a at runtime. The NgLazyLoadComponent takes a function named lazyImporter as an input, which returns a Promise containing the component to be loaded.

See the stackblitz demo.

Get Started

Step 1: install ng-lazy-load-component

npm i ng-lazy-load-component

Step 2: Import NgLazyLoadComponentModule into your app module, eg.:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';

import { NgLazyLoadComponentModule } from 'ng-lazy-load-component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    CommonModule,
    NgLazyLoadComponentModule,
  ],
  bootstrap: [AppComponent],
  ],
})
export class AppModule { }

Step 2: This is test-lazy.ts an example of component with NgModule to lazy load (but also works with standalone component), eg.:

import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, NgModule, Output } from '@angular/core';

@Component({
  selector: 'test-lazy',
  template: `
  Input1: {{testInput1}} <button (click)="testOutput1.emit(testInput1)">Output1</button><br />
  Input2: {{testInput2}} <button (click)="testOutput2.emit(testInput2)">Output2</button>
  `
})
export class TestLazyComponent {
  @Input() testInput1 = 0;
  @Input() testInput2 = 0;
  @Output() testOutput1: EventEmitter<number> = new EventEmitter<number>();
  @Output() testOutput2: EventEmitter<number> = new EventEmitter<number>();
}

@NgModule({
  declarations: [TestLazyComponent],
  imports: [CommonModule],
  exports: [TestLazyComponent],
})
export class TestLazyModule {}

Step 3: usage

import { Component } from '@angular/core';
import { NgLazyLoadComponentImporter, NgLazyLoadComponentOutput } from 'ng-lazy-load-component';

@Component({
  selector: 'app-root',
  template: `
  <ng-lazy-load-component 
    [lazyImporter]="lazyImporter" 
    [componentInput]="{testInput1, testInput2}" 
    (componentOutput)="onComponentOutput($event)"
  >
    <div #loading>Loading...</div> <!-- optional -->
    <div #error>Ops!</div> <!-- optional -->
  </ng-lazy-load-component>
  `,
})
export class AppComponent {
  public testInput1 = 0; // test-lazy component `@Input() testInput1`
  public testInput2 = 0; // test-lazy component `@Input() testInput2`

  lazyImporter: NgLazyLoadComponentImporter = () => import('./test-lazy').then((m) => ({
    component: m.TestLazyComponent, // Also works with standalone component
    module: m.TestLazyModule // NgModule is optional!
  }));

  /** test-lazy component outputs: `@Output() testOutput1` and `@Output() testOutput2` */
  onComponentOutput(event: NgLazyLoadComponentOutput) {
    switch (event.property) {
      case 'testOutput1': this.testInput1 = event.value + 1; break;
      case 'testOutput2': this.testInput2 = event.value + 1; break;
    }
  }
}

Support

This is an open-source project. Star this repository, if you like it, or even donate. Thank you so much!

My other libraries

I have published some other Angular libraries, take a look:

• NgSimpleState: Simple state management in Angular with only Services and RxJS
• NgHttpCaching: Cache for HTTP requests in Angular application
• NgGenericPipe: Generic pipe for Angular application for use a component method into component template.
• NgLet: Structural directive for sharing data as local variable into html component template
• NgForTrackByProperty: Angular global trackBy property directive with strict type checking