In Angular, you can dynamically create a component and add it to an embedded view using the ComponentFactoryResolver and ViewContainerRef classes. This technique is commonly used for scenarios where you want to dynamically render components based on certain conditions or user interactions.

Here's a step-by-step guide to adding a dynamically created component to an embedded view:

  1. Create the Dynamic Component: First, create the dynamic component that you want to add to the embedded view. For this example, let's assume we have a simple dynamic component named DynamicComponent.

    typescript
    import { Component } from '@angular/core'; @Component({ selector: 'app-dynamic-component', template: '<p>Hello, I am a dynamically created component!</p>', }) export class DynamicComponent {}
  2. Get the View Container Reference: In the parent component where you want to add the dynamic component, inject the ViewContainerRef class and use it to get the reference to the view container where the dynamic component will be inserted.

    typescript
    import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core'; import { DynamicComponent } from './dynamic.component'; @Component({ selector: 'app-parent-component', template: '<ng-container #dynamicComponentContainer></ng-container>', }) export class ParentComponent { @ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) dynamicComponentContainer: ViewContainerRef; constructor(private componentFactoryResolver: ComponentFactoryResolver) {} }
  3. Create and Add the Dynamic Component: In the ngOnInit or any other suitable lifecycle hook, use the ComponentFactoryResolver to create an instance of the dynamic component and add it to the view container.

    typescript
    import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef, OnInit } from '@angular/core'; import { DynamicComponent } from './dynamic.component'; @Component({ selector: 'app-parent-component', template: '<ng-container #dynamicComponentContainer></ng-container>', }) export class ParentComponent implements OnInit { @ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) dynamicComponentContainer: ViewContainerRef; constructor(private componentFactoryResolver: ComponentFactoryResolver) {} ngOnInit() { // Create a ComponentFactory for the dynamic component const dynamicComponentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent); // Create an instance of the dynamic component const dynamicComponentRef = dynamicComponentFactory.create(this.dynamicComponentContainer.injector); // Insert the dynamic component into the view container this.dynamicComponentContainer.insert(dynamicComponentRef.hostView); } }
  4. Update the Parent Template: In the parent component's template, add the placeholder <ng-container #dynamicComponentContainer></ng-container> where you want the dynamic component to be rendered.

  5. Optional: Pass Data to the Dynamic Component: If you need to pass data to the dynamically created component, you can use the @Input decorator in the dynamic component class and set the property values before inserting it into the view container.

    typescript
    import { Component, Input } from '@angular/core'; @Component({ selector: 'app-dynamic-component', template: '<p>Hello, I am a dynamically created component with data: {{ data }}</p>', }) export class DynamicComponent { @Input() data: string; }

    Then, in the parent component, set the input property values before inserting the dynamic component.

    typescript
    // ... ngOnInit() { // ... // Set data for the dynamic component dynamicComponentRef.instance.data = 'Some data to be passed'; // Insert the dynamic component into the view container this.dynamicComponentContainer.insert(dynamicComponentRef.hostView); } // ...

With these steps, you should be able to dynamically create the DynamicComponent and add it to the embedded view of the ParentComponent. The dynamic component will be rendered in the position where the <ng-container> with the #dynamicComponentContainer template reference variable is placed in the parent component's template.

Have questions or queries?
Get in Touch