How To Create Dynamic Components In Angular Application

Introduction

 
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
 
Example,
 
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';  
  6.   
  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.
ViewContainerRef
 
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.
App.component.ts
  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
 
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,
 
dynamic.component.html
  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 

Conclusion

 
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