How to Develop Dynamic Components in Angular

 

 

What Dynamic Components Are

 

• Dynamic component means, this is that component location which is not defined in angular at build time, that means the component is not used in anywhere in Angular template
• Rather, Component will be created at runtime and placed in the angular at runtime

Let's take an example to understand it better

Example : I want to render 3 component on button click dynamically in same page

Solution : We will take below step to complete it 😊

• Step 1: We will create 3 different components by using the following command.
• ng g c Home
• ng g c Index
• ng g c Welcome
• Step 2: Place below code in app.component.html

·          

·                             

 <h1>Dynamic Form -  

Component Factory </h1>

 <button class="myButton" 

(click)="RenderHomeForm()">

Render Home Page </button> 

<button class="myButton"

(click)="RenderIndexForm()">

Render Index Page </button> 

<button class="myButton"

 (click)="RenderWelcomeForm()">

Render Welcome Page </button>  

<ng-template #formTemplate>

</ng-template>

• Step 3: Place below code in AppComponent.ts

 import { IndexComponent } 

from './../index/index.component'; 

import { Component, OnInit, 

ComponentFactoryResolver, 

ViewContainerRef, ViewChild } 

from '@angular/core'; 

import { HomeComponent }

 from '../home/home.component'; 

import { WelcomeComponent } 

from '../welcome/welcome.component'; 

@Component({   selector: 'app-root', 

  templateUrl: './app.component.html',

   styleUrls: ['./app.component.css'] }) 

export class AppComponent implements

 OnInit {   

 @ViewChild('formTemplate', { read: ViewContainerRef })

 formRef: ViewContainerRef;   

 constructor(private componentFactoryResolver: ComponentFactoryResolver) { }   

 ngOnInit(): void {   }   

 RenderHomeForm() { 

this.formRef.clear();     

const homeComponent = this.componentFactoryResolver.resolveComponentFactory(HomeComponent); 

const componentRef = this.formRef.createComponent(homeComponent);   

componentRef.instance.title = 'This is home page';   }   

 RenderIndexForm() 

{ this.formRef.clear();   

const indexComponent =

this.componentFactoryResolver.resolveComponentFactory(IndexComponent);  

const componentRef = this.formRef.createComponent(indexComponent);  

componentRef.instance.title = 'This is Index Page';   }   

RenderWelcomeForm() {     this.formRef.clear();   

const welcomeComponent = this.componentFactoryResolver.resolveComponentFactory(WelcomeComponent);   

const componentRef = this.formRef.createComponent(welcomeComponent);    

componentRef.instance.title = 'This is Welcome page';   } }  

• Step 4: use below command to run your application. It will show you how dynamic component works
• ng serve

• Git hub link.

·         https://github.com/coremicroservices/Component-Factory

• Facebook

·         https://www.facebook.com/coremicroservices

• Youtube

https://www.youtube.com/watch?v=BDRI5Q-uCZQ

 

With ❤️ Happy Coding