How to create components dynamically based on data with API using Angular?

Question

Angular

Functional description:
The user has the ability to add tabs (as in a browser), in each tab he can select charts from the list for display. Those. as a result, it can have several tabs, each of which has a different set of charts. The binding goes to the account, so I think there will be an API for saving and receiving data about the structure of tabs and charts.

Question: what is the best way to implement this? In what form is the data stored? What functionality of Angular allows you to best implement this? Interested in best practice

Answer 1

In general, dynamic components are implemented using a router. In your case, each tab is some unique path. The list of tabs is loaded via the API, and based on the loaded data, an array is formed like

[
  { name: 'Chart 1', routerLink: ['/chart-1']},
  { name: 'Chart 2 ', routerLink: ['/chart-2']},
]

Further, based on this array, a component with tabs is built. And the tab components themselves will be loaded using the router when switching to the tab.