How to Dynamically Create a Component in Angular

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 {}