Getting Started

ngx-lazy-directive provides an easy way to lazy load components combined with *ngIf directive, thereby reducing the Firrst Contentful Paint time when a module becomes larger.

Angular Version

• Support for Angular version 15

Installation

1npm install ngx-lazy-directive

Usage

1. Define a list of components should be lazy loaded.

Note: components should be standalone.

1export const LAZY_LOADED_COMPONENTS = {
2 'app-chart': () => import('src/app/dashboard/components/chart.component.ts')
3}

2. Pass the import function to the loadChild property.

1<ng-container
2     *ngIf="visible"
3     ngxLazyDirective
4     [loadChild]="LAZY_LOADED_COMPONENTS['app-chart']">
5</ng-container>

3. Pass binding data and event handlers to the lazy loaded component using the inputs and outputs properties.

1<ng-container
2    *ngIf="visible"
3    ngxLazyDirective
4    [loadChild]="LAZY_LOADED_COMPONENTS['app-chart']"
5    [inputs]="{
6      dataSource: dataSource,
7      name: name
8    }"
9    [outputs]="{
10      nameChanged: onNameChanged
11    }">
12</ng-container>

4. Define event handlers.

1// Event handlers must be arrow functions
2onNameChanged = (name: string) => {
3  this.name = name;
4}