Angular Components

Question

How to render HTML containing Angular Components dynamically at run-time in the other component using bootstarp and Angular 15

Deepak Rawat · Answer

Import the necessary modules and classes: In your component file, import the following Angular classes: import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core'; Set up the view container reference: In your component class, declare a ViewChild of type ViewContainerRef to access the target container where the HTML will be dynamically rendered. @ViewChild('dynamicContainer', { read: ViewContainerRef }) dynamicContainer: ViewContainerRef; Inject the ComponentFactoryResolver: In the constructor of your component, inject the ComponentFactoryResolver. constructor(private componentFactoryResolver: ComponentFactoryResolver) {} Create a method in your component that will handle the dynamic rendering. This method should take an HTML string containing the Angular component markup as a parameter. renderDynamicComponent(html: string) { // Clear any existing content in the container this.dynamicContainer.clear(); // Create a component factory based on the HTML string const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyDynamicComponent); // Create an instance of the dynamic component const componentRef = this.dynamicContainer.createComponent(componentFactory); // Set any necessary input properties on the component instance componentRef.instance.someInputProperty = 'Some value'; // Insert the component into the container const element = componentRef.location.nativeElement as HTMLElement; element.innerHTML = html; }

Mohamed Azarudeen Z · Answer

Hi Piyush To dynamically render HTML containing Angular components at runtime, you can use Angular's ComponentFactoryResolver along with ViewContainerRef . Here's a step-by-step guide: First, create a component that will act as a placeholder for the dynamically loaded components. Let's call it DynamicComponent . import { Component } from '@angular/core'; @Component({ template: ` ` }) export class DynamicComponent { } In the component where you want to dynamically load other Angular components, inject ComponentFactoryResolver and ViewContainerRef . import { Component, ComponentFactoryResolver, ViewContainerRef } from '@angular/core'; @Component({ template: ` ` }) export class ParentComponent { @ViewChild('dynamicComponentPlaceholder', { read: ViewContainerRef }) dynamicComponentPlaceholder!: ViewContainerRef; constructor(private componentFactoryResolver: ComponentFactoryResolver) { } loadDynamicComponent() { // Replace 'YourDynamicComponent' with the component you want to load dynamically. const componentFactory = this.componentFactoryResolver.resolveComponentFactory(YourDynamicComponent); // Clear the existing content from the placeholder. this.dynamicComponentPlaceholder.clear(); // Create and attach the component to the placeholder. const componentRef = this.dynamicComponentPlaceholder.createComponent(componentFactory); // Optionally, you can set inputs or subscribe to outputs of the dynamically loaded component. } } Finally, you can call the loadDynamicComponent() method from ParentComponent whenever you want to dynamically render YourDynamicComponent . Load Dynamic Component Hope this helps