Angular Components

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

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:

1. 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