NGXF
  • 🚀Introduction
  • Get Started
    • Why
    • Installation
  • Concepts
    • Introduction
  • Features
    • Activated Route
    • Call
    • Init
    • Lazy
    • Keep Alive
    • Timeout
    • Track By Key
    • Repeat
    • Virtual Scroll
  • Server Interaction
    • Async
    • Cookies
    • Http
    • Socket.IO
  • Hooks
    • State Hook
    • Effect Hook
    • Reducer Hook
  • Recompose
    • Compose
  • API
    • NgxfModule
    • HttpDirective
    • RouteDirective
    • InitDirective
    • ComposeDirective
    • ReturnDirective
    • TimeoutDirective
    • CookiesDirective
    • AsyncDirective
    • LazyDirective
    • CallPipe
  • Recipes
    • Caching
    • Style Guide
  • Community
    • FAQ
    • Contributing
Powered by GitBook
On this page
  • Create Lazy Module
  • Add Lazy Module to angular.json
  • Basic Usage
  • Lazy as Structural Directive
  • Lazy as Structural Directive with Default Input
  • Lazy as Binding Directive
  1. Features

Lazy

The lazy directive loads lazy modules and renders lazy components.

Create Lazy Module

Create a lazy module and component in the src/app/view/lazy/lazy.module.ts file.

import { NgxfModule } from '@ngxf/platform';

@Component({
  selector: 'app-lazy',
  template: 'Hello, NGX Features!'
})
export class LazyComponent {}

@NgModule({
  imports: [ NgxfModule.forLazy(LazyComponent) ],
  declarations: [ LazyComponent ]
})
export class LazyModule {}

Add Lazy Module to angular.json

Add the path to the lazy module in angular.json file.

projects.PROJECT.architect.build.options.lazyModules = [
  "src/app/view/lazy/lazy.module.ts"
]

Basic Usage

An example in COMPONENT.template.html.

<ng-container *lazy="'src/app/view/lazy/lazy.module#LazyModule'"></ng-container>

Lazy as Structural Directive

An example in COMPONENT.template.html.

<ng-container *lazy="let component
  loadChildren 'src/app/view/lazy/lazy.module#LazyModule';
  activate activate; deactivate deactivate
">${NG_CONTENT}</ng-container>

Lazy as Structural Directive with Default Input

An example in COMPONENT.template.html.

<ng-container *lazy="'src/app/view/lazy/lazy.module#LazyModule';
  activate activate; deactivate deactivate
">${NG_CONTENT}</ng-container>

Lazy as Binding Directive

An example in COMPONENT.template.html.

<ng-template let-component [lazy]="'src/app/view/lazy/lazy.module#LazyModule'"
  (activate)="activate($event)" (deactivate)="deactivate($event)"
>${NG_CONTENT}</ng-template>

PreviousInitNextKeep Alive

Last updated 6 years ago