# 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
```
## Lazy as Structural Directive
An example in `COMPONENT.template.html`.
```markup
${NG_CONTENT}
```
## �Lazy as Structural Directive with Default Input
An example in `COMPONENT.template.html`.
```markup
${NG_CONTENT}
```
## Lazy as Binding Directive
An example in `COMPONENT.template.html`.
```markup
${NG_CONTENT}
```
�