# 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.

```typescript
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.

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

## Basic Usage

An example in `COMPONENT.template.html`.

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

## Lazy as Structural Directive

An example in `COMPONENT.template.html`.

```markup
<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`.

```markup
<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`.

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


