Dynamic Component

To load a dynamic component in Angular, we can use the ViewContainerRef. Here's a step-by-step guide on how to do it:

Import the necessary Angular modules and classes:

typescript

import { ComponentRef, Type, ViewContainerRef } from '@angular/core';

Inject the ComponentFactoryResolver and ViewContainerRef into your component or service:

typescript

@ViewChild('container', { read: ViewContainerRef }) viewContainerRef: ViewContainerRef;

Define a method that accepts the component type as a parameter and loads it dynamically:

typescript

loadComponent(componentType: Type<T>): ComponentRef<T> {
  // Clear the view container
  this.viewContainerRef.clear();

  // Create a component reference
  const componentRef = this.viewContainerRef.createComponent(componentType);

  // Return the component reference in case you need to interact with the dynamically loaded component
  return componentRef;
}

Use the loadComponent method to load the dynamic component. For example, if you have a DynamicComponent that you want to load dynamically, you can do the following:

typescript

import { DynamicComponent } from './dynamic.component';

// Call the loadComponent method and pass the DynamicComponent type
const conpenentRef = this.loadComponent(DynamicComponent);

// Use conpenentRef change the conpenent attr...
// conpenentRef.instance.xxx = 'xxx'
// conpenentRef.instance.getXXX()

Make sure you have a ViewContainerRef element in your template where you want to load the dynamic component. For example, you can add the following element to your template:

html

<ng-container #container></ng-container>

With these steps, you should be able to dynamically load a component in Angular.

Dynamic Component ​

Dynamic Component