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?

score -1 · Accepted Answer · answered Nov 23 '21 at 12:02

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

answered Nov 23 '21 at 12:02

pramod24

and the list can change at runtime if needed? – deszok Nov 23 '21 at 12:46
i can't understand what you say – pramod24 Nov 23 '21 at 12:58
2

Your code is not loading an Angular component...just the value of a json object. I need to load a component – deszok Nov 23 '21 at 13:06
Unless you know how to change this: componentListToLoad:any = [ { "name": "Component1" }, { "name": "Component2" } ]; to this: componentListToLoad:any = [ { "name": Component1 }, { "name": Component2 } ]; – deszok Nov 23 '21 at 13:31

1 Answers1