Angular Load component list from json file

Question

I am using Angular 13 and I'm looking for a way to have a list or components load by reading the component names from a json file.

For example..I have a json file with the names of the components that I want to load into my app.component.html

componentListToLoad = [
  {
    "name": "Component1"
  },
  {
    "name": "Component2"
  }
]

Then in a for loop I would get the two components loaded.

app.component.html

<div *ngFor="let list of componentListToLoad">
  // Load the component list
</div>

How can I do this in Angular?

Answer 1

In app.component.ts file declare componentListToLoad array

  let componentListToLoad:any = [
  {
    "name": "Component1"
   },
  {
   "name": "Component2"
   }
  ];

In app.component.html file add following code

 <ng-container *ngFor="let list of componentListToLoad">
    <div>{{ list.name }}</div>
  </ng-container>