In the application, add a new component using the Angular CLI command, as shown below.
ng g c hello --flat --skip-import
Here --skip-import flag is used so that Angular does not declare HelloComponent in the module, as you wish to load HelloComponent dynamically.
Next, add code in HelloComponent as shown in the next code listing:
import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';
@Component({
selector: 'app-hello',
template: `
<h1>Greetings</h1>
<h2>{{helloMessage}}</h2>
<button (click)='hello()'>sayHello</button>
`
})
export class HelloComponent implements OnInit {
@Input() helloMessage: string;
@Output() sendMessageEvent = new EventEmitter();
constructor() { }
ngOnInit(): void {
}
hello(): void {
this.sendMessageEvent.emit('Hello From Hello Component');
}
}
HelloComponent has an @Input() decorated property to accept data from the parent component and an @Output() decorated EventEmitter so that the event raised here can be handled in the parent component. The parent component is a component in which HelloComponent will be loaded dynamically.
You can lazily load a component in any other component, hence creating a parent-child relationship between them. You want to lazy load HelloComponent on the click of the button in the parent component, so to do that add a button as shown next.
<h1>{{message}}</h1>
<button (click)='loadHelloComponent()'>Hello</button>
Next, in the constructor of the parent component inject ViewContainerRef and ComponentFactoryResolver classes:
constructor(private vcref: ViewContainerRef,
private cfr: ComponentFactoryResolver){ }
As of the official documentation, ComponentFactoryResolver class is a simple registry that maps components to generated ComponentFactory classes that can be used to create an instance of the component using the create() method.
The ViewContainerRef represents a container where one or more views can be attached. It can contain host views by instantiating a component with the createComponent() method.
To lazy load the component, we will use the import() method inside an async/await function.
async loadHelloComponent(){
this.vcref.clear();
const { HelloComponent } = await import('./hello.component');
let hellocomp = this.vcref.createComponent(
this.cfr.resolveComponentFactory(HelloComponent)
);
}
The above function first clears the container; otherwise, on every click of the button, the new instance of HelloComponent would be added in the container. After that, the function imports the HelloComponent using the import method. By using await syntax, it loads the component asynchronously. Once the reference of HelloComponent is loaded, it creates the component on the view container using the createComponent method and bypassing resolveComponentFactory method in it.
Now when you click the button, you will lazy load the HelloComponent inside the parent component.
Angular allows us to pass data to @Input() decorated properties and handle events of lazy-loaded components using the instance property of the lazy-loaded component. For example, you can pass data and handle an event of HelloComponent in the parent component as shown in the next code listing:
hellocomp.instance.helloMessage = "Data Passed from Parent";
hellocomp.instance.sendMessageEvent.subscribe(data=>{
console.log(data);
})
As you see, you can use instance to access the properties and events of the lazy-loaded component.
Sometimes it is not possible to make a function async. Hence, you cannot use an await statement as we did earlier. In this scenario you can use promise’s then method to lazy load a component as shown in the next code listing:
loadHelloComponent() {
this.vcref.clear();
import('./hello.component').then(
({ HelloComponent }) => {
let hellocomp = this.vcref.createComponent(
this.cfr.resolveComponentFactory(HelloComponent)
);
hellocomp.instance.helloMessage = "Data Passed from Parent";
hellocomp.instance.sendMessageEvent.subscribe(data => {
console.log(data);
})
}
)
}
In the above function, everything is the same. It just promises the then method is used instead of async-await statements.
Sometimes a lazy-loaded component relies on other modules. For example, let’s say HelloComponent is using [(ngModel)] as shown in the next code listing:
template: `
<h1>Greetings</h1>
<h2>{{helloMessage}}</h2>
<input type='text' [(ngModel)]='message' />
<h3>Hello {{message}}</h3>
<button (click)='hello()'>sayHello</button>
`
HTML
As ngModel is the part of FormsModule, when you use it inside a lazy-loaded component, Angular complains about that with error: Can’t bind to ngModel since it isn’t a known property of input.
This problem can be fixed by importing FormsModule inside the HelloComponent itself. With that inside the same file hello.component.ts, create a module and pass FormsModule inside the imports array as shown in the next code listing:
@NgModule({
declarations: [HelloComponent],
imports: [FormsModule]
})
class PlanetComponentModule {}
TypeScript
You have to create ngModule in the same file in which the component is created and pass all the dependent modules in the imports array.
To lazy load a component inside a particular location in the template, you can use ViewChild. Let’s say you wish to lazy load HelloComponent inside the #hellotemp template of the parent component.
<div>
<ng-template #hellotemp></ng-template>
</div>
HTML
To do this, refer hellotemp as a ViewChild in the parent component class as shown in the next code listing:
@ViewChild('hellotemp', { read: ViewContainerRef })
private helloviewcontainerref: ViewContainerRef;
TypeScript
Here we are reading the ng-template as ViewContainerRef so that the component can be loaded to it, and finally, you can lazy load a component inside it as we did earlier:
async loadHelloComponent(){
this.vcref.clear();
const { HelloComponent } = await import('./hello.component');
let hellocomp = this.helloviewcontainerref.createComponent(
this.cfr.resolveComponentFactory(HelloComponent)
);
hellocomp.instance.helloMessage = "Data received from patient";
hellocomp.instance.sendMessageEvent.subscribe(data=>{
console.log(data);
})
}