How To Create Dynamic Components In Angular Application


In this article, we will learn how to create Dynamic Components in Angular Application.
Step 1
Create an Angular project setup using the below commands or however you create your Angular app
ng new projectname
ng new dynamic
How To Create Dynamic Components In Angular Application 
Step 2
Next, Now, we must generate Component from our Angular cli,
Open a new terminal and run the following below commands
ng g c dynamic
How To Create Dynamic Components In Angular Application 
Step 3 - App.module.ts
Now we will providers service in app.moudule.ts
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { AppRoutingModule } from './app-routing.module';  
  4. import { AppComponent } from './app.component';  
  5. import { DynamicComponent } from './dynamic/dynamic.component';  
  7. @NgModule({  
  8.   declarations: [  
  9.     AppComponent,  
  10.     DynamicComponent  
  11.   ],  
  12.   imports: [  
  13.     BrowserModule,  
  14.     AppRoutingModule  
  15.   ],  
  16.   providers: [],  
  17.   bootstrap: [AppComponent]  
  18. })  
  19. export class AppModule { }  
Step 4 - ViewChild
It is a decorators in Angular provide a way to access and manipulate DOM elements, directives and components.
The following meta information in decorator:
  • selector - the selector of the element to query. This can be a directive type or a name.
  • read - read a different token from the queried elements.
It is represents a container where one or more views can be attached to a component and DOM element can be used as a view container.
we are inserting new components or templates programmatically, we probably used the ViewContainerRef service.
What is ComponentFactoryResolver
A simple registry that maps Components to generated Component Factory classes that can be used to create instances of components. Use to obtain the factory for a given component type, then use the factory's create () method to create a component of that type.
In App.component.ts, we need to import the following,
  1. ViewChild, ViewContainerRef, and ComponentFactoryResolver from @angular/core.
  2. ComponentRef and ComponentFactory from @angular/core.
  1. import {  
  2.   Component,  
  3.   ComponentFactoryResolver,  
  4.   ViewChild,  
  5.   ElementRef,  
  6.   ViewContainerRef,  
  7. } from '@angular/core';  
  8. import { DynamicComponent } from './dynamic/dynamic.component';  
  9. @Component({  
  10.   selector: 'app-root',  
  11.   templateUrl: './app.component.html',  
  12.   styleUrls: ['./app.component.scss'],  
  13. })  
  14. export class AppComponent {  
  15.   @ViewChild('container', { read: ViewContainerRef })  
  16.   container!: ViewContainerRef;  
  17.   constructor(private componentFactoryResolver: ComponentFactoryResolver) { }  
  18.   add(): void {  
  19.     // create the component factory  
  20.     const dynamicComponentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);  
  21.     // add the component to the view  
  22.     const componentRef = this.container.createComponent(dynamicComponentFactory);  
  23.   }  
  24. }  
In add() method we will create the component factory and add the component view.

Step 5
Now, we can assign the id in app.component.html
  1. <ng-container #container></ng-container>   
ng-container is a directive. It will avoid creating that extra div, we can instead use ng-container directive and it can also provide a placeholder for injecting a template dynamically into the page.
The template for AppComponent is as below,
  1. <button (click)="add()">Dynamically Add Component</button>  
  2. <!-- insert the dynamic components -->  
  3. <ng-container #container></ ng-container >  
In an app component click on Dynamically Add component event showing the dynamic component.
The template for dynamicComponent is as below,
  1. <p>Dynamic Component </p>  
Step 7
Now we will run the application
ng serve
How To Create Dynamic Components In Angular Application 
On successful execution of the above command, it will show the browser.
How To Create Dynamic Components In Angular Application 


After reading this, you know more about dynamic component and how to practice it in the way.

Recommended Ebook

Crack Your Angular Interview

Download Now!
Similar Articles