Using a loop to pass a template to a function and create a dynamic component

Question

Using a loop to pass a template to a function and create a dynamic component

I am currently attempting to dynamically generate a component while looping through a list. However, I have encountered an issue where the template cannot be passed to the function for creating the component. The error message indicates that the viewContainer is undefined.

Error: Cannot read property 'createComponent' of undefined

export class DataEditModalComponent {
  public fields = [
    { component: ComponentA },
    { component: ComponentB }
  ]

  public constructor(private readonly componentFactoryResolver: ComponentFactoryResolver) { }

  public createComponent(component: any, viewContainer: ViewContainerRef) {
    const factory = this.componentFactoryResolver.resolveComponentFactory(component);
    viewContainer.createComponent(factory);
  }
}

<div *ngFor="let field of fields">
  <ng-template #template *ngIf="field.component && createComponent(field.component, template)">
  </ng-template>
</div>

javascript angular typescript

Answer 1

Answer №1

Here is an illustration of how this concept could be put into action:

Module:

export const modules = [
  { module: ModuleA },
  { module: ModuleB }
]

loadedModules = [];

onInit(): void {
  this.loadedModules = modules.filter(item => item.module).map(item => item.module)
}

Structure:

<ng-container *ngFor="let m of loadedModules" [ngComponentOutlet]="m"></ng-container>

Answer 2

Here is an illustration of how this concept could be put into action:

Module:

export const modules = [
  { module: ModuleA },
  { module: ModuleB }
]

loadedModules = [];

onInit(): void {
  this.loadedModules = modules.filter(item => item.module).map(item => item.module)
}

Structure:

<ng-container *ngFor="let m of loadedModules" [ngComponentOutlet]="m"></ng-container>

Using a loop to pass a template to a function and create a dynamic component

Answer №1

Similar questions

Can you please provide instructions on how to expand the view in the title bar for a JavaScript/CSS/HTML UPW project?

Embedding a pop-up window in PHP script

Utilizing PHP Variables in Jquery Ajax Success Response

Instructions for extracting the href value from an anchor tag using JavaScript within a specified string

Unlocking the power of tailwind colors in javascript

Passing ngModel from controller to directive in AngularJS

Display data in Angular2 before loading from the http source

How can I modify the fill color of a Cell when hovering over a Bar Chart in Recharts?

In ReactJS, organizing arrays within arrays for nesting purposes

Error message while running jQuery 3.2.1: issues with UL and LI

Fixing JavaScript Image Swap Bugs

Creating unique image control buttons for each image within a div using a combination of CSS and JavaScript

Is it possible for a jQuery selector to retain its object? What can be done to prevent it

Guide on darkening the surrounding div of an alert to give it a modal-like effect

The default props defined in the React component's child element are taking precedence over the custom props supplied by the parent component

Issue encountered while attempting to pass a function to a child component in React (Uncaught error: TypeError - result is not a function)

Tips on utilizing path variables within JSON paths

Reading and writing to a file in a UI automation using JavaScript: Tips and tricks

Executing Cross-Component Communication in Angular 7: A Quick Guide

Error: The use of "let" as a lexically bound identifier is not permitted