The angular framework already provides a lot of functionality out of the box. Still, sometimes our project needs something that is not available in the framework, but this framework provides features to achieve the functionality quickly. In this post, I will show you how to load the Angular
component dynamically.
When to use
Let’s suppose you want to create a pop up then you can load the component dynamically
Let’s start the tutorial
- create a new angular application
ng new angular-dynamic-component
- Remove everything from
app.component.html
and paste the following code snippet
<button (click)="loadComponent()">Load Component</button>
<div>
<h3>Parent</h3>
<ng-template #target></ng-template>
</div>
target
is template reference variable where we will load the component
- Now open
app.component.ts
file and import the following modules
import {
Component,
ViewChild,
ComponentFactoryResolver,
ViewContainerRef
} from "@angular/core";
and then inject ComponentFactoryResolver
as a dependency in the constructor
constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
Now create one class property that holds the DOM
reference
@ViewChild("target", { read: ViewContainerRef, static: false })
target: ViewContainerRef;
ViewChild
It is used to access the DOM
element in the parent component
ComponentFactoryResolver
A simple registry that maps Components to generated ComponentFactory classes that can be used to create instances of components
ViewContainerRef
If you want to insert a new component or template, you need to tell Angular where to put this element. And that’s what ViewContainerRef is: A DOM element (container) where I can put your new component as a sibling to this element.
- Now create one component named
child
in the same project
ng g c child
- Open open
child.component.html
and add the following code
<h2>I am child component</h2>
Now it’s time to load the component in the parent component with the click of a button. Open app.component.ts
file and add the following code snippet inside
loadComponent() {
this.target.clear();
const factory = this.componentFactoryResolver.resolveComponentFactory(
ChildComponent
);
const componentRef = this.target.createComponent(factory);
}
At this point, when running the application, you will get an error because we have not set the entryComponents
in AppModule
. We can set that as shown in the listing below:
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";
import { HelloComponent } from "./hello.component";
import { ChildComponent } from "./child/child.component";
@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent, HelloComponent, ChildComponent],
bootstrap: [AppComponent],
entryComponents: [ChildComponent]
})
export class AppModule {}