# How to Dynamically Create a Component in Angular

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 following modules
 import {
Component,
ViewChild,
ComponentFactoryResolver,
ViewContainerRef
} from "@angular/core";


and then inject ComponentFactoryResolver as a dependecy in the constrctuor

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 newly 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 following code
<h2>I am child component</h2>


Now it’s time to load the component in parent component on click of a button. Open app.component.ts file and add following code snippet inside


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


Reactions