The article is originally published to my blog here.
Angular is a TypeScript based Open Source JavaScript framework. A situation like this happens most of the time where we need to create components dynamically. This article explains what is the best way to create dynamic components in Angular.
A component is a page in Angular. We will try to create it dynamically using the latest Ivy Component API and see how it works. Let’s start!
ComponentFactoryResolver
is removed from latest Angular release. This article explains how to use Ivy API to create components dynamically.
Create Dynamic Components in Angular
We have seen in the latest Angular release, the use of ComponentFactoryResolver
is removed. Ivy creates the opportunity to instantiate the component with ViewContainerRef.createComponent without creating an associated factory.
Learn what are the new features and updates in Angular 13 here.
Create ChildLoader Directive
The first step in creating a dynamic component is to set up a generic child loader directive. It will be responsible to load components dynamically wherever required in the project.
load-child.directive.ts
import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[dynamicChildLoader]'
})
export class DynamicChildLoaderDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}
DynamicChildLoaderDirective
is a generic directive that will load the child components dynamically throughout the application. ViewContainerRef
is instantiated publicly that will be used to apply the component.
Setup parent to load component dynamically
Create a parent component that will hold the child component dynamically.
parent.component.html
<p>dynamic-components works!</p>
<ng-template dynamicChildLoader></ng-template>
Create a ng-template
to hold the dynamic child component. dynamicChildLoader
is used to apply the component dynamically. You can use it at any other place as well as per your requirement. It will create the component from ts file.
parent.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { DynamicChildComponent } from './dynamic-child/dynamic-child.component';
import { DynamicChildLoaderDirective } from './load-child.directive';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
@ViewChild(DynamicChildLoaderDirective, { static: true }) dynamicChild!: DynamicChildLoaderDirective;
constructor() { }
ngOnInit(): void {
this.loadDynamicComponent();
}
private loadDynamicComponent() {
this.dynamicChild.viewContainerRef.createComponent(DynamicChildComponent);
}
}
Initialize a ViewChild
of DynamicChildLoaderDirective
type. Create the dynamic component using viewContainerRef
from DynamicChildLoaderDirective
directive.
Output
Run the application and check the browser. You can see the child component is loaded dynamically.
Note: It does not require destroying dynamically loaded components. The new Ivy API does it itself.
Create dynamic components in Angular with Parameters
So far we have learnt how to create components dynamically using Angular new API. It’s time to pass parameters to dynamically created components. Let’s see how to implement it.
child.component.ts
Declare an @Input
variable to receive custom data from the parent.
@Input() customData: any;
parent.component.ts
Pass the data from parent component at the time of instantiating the dynamic component.
const componentRef = this.dynamicChild.viewContainerRef.createComponent(DynamicChildComponent);
componentRef.instance.customData = {
test: 'test key',
value: 'test value'
}
Assign the created instance in a local variable componentRef
. Access the child component’s customData
variable using instance
. Pass the custom data in the variable. You can pass multiple data by creating multiple @Input
variables in the child component.
The custom data is received at child component that was sent from the parent at the time of creating component instance.
After Angular’s latest release, this is probably the best way to create a component dynamically in Angular. We do not need to destroy dynamically created components explicitly. Angular’s new API does it itself.
The article is originally published to my blog here.
Conclusion
That’s it! We learnt how to create a dynamic component in Angular with the New API without using ComponentFactoryResolver. It also shows how to pass parameters to dynamically created components in Angular.
Check other Angular related articles here.
Read how proper use of RxJS Observables and Operators can improve your Website Speed.
Some common points that can improve your Angular Website Speed you can’t imagine.
Top comments (0)