Как создавать компоненты динамически в зависимости от данных с API, используя Angular?

Question

[kiko7182]

Описание функционала:
У юзера есть возможность добавлять табы ( как в браузере), в каждом табе он может выбирать графики из списка для отображения. Т.е. в итоге у него может быть несколько табов, в каждом из которых разный набор графиков. Привязка идет к аккаунту, поэтому думаю будет API для сохранения и получения данных о структуре табов и графиков.

Вопрос: как лучше это реализовать? В каком виде хранить данные? Какой функционал Angular позволяет лучше всего это реализовать? Интересует best practice

Answer 1

[Demian Smith]

В общем случае, динамические компоненты реализуются при помощи роутера. В вашем случае, кажды таб - это какой-то уникальный путь. Список табов подгружается через API и на основе подгруженных данных формируется массив вроде

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

Дальше на основе этого массива строится компонент с табами. А сами компоненты табов будут подгружаться при помощи роутера при переходе на таб.