Angular - динамическое добавление компонентов в разные родительские элементы

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

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

Это массив в form.component.ts:

steps = [
    LanguageComponent,
    CodeComponent,
    HardwareComponent,
    SubmissionComponent
]

Или должно быть:

steps = [
    new LanguageComponent,
    new CodeComponent,
    new HardwareComponent,
    new SubmissionComponent
]

?

Это псевдо-форма.component.html:

<div id = "tabs">
    <div class = "tab" *ngFor = "let step of steps" id = "{{step.header}}">
        {{ step.header }}
        <app-step></app-step>
        {{ buttons }}
    </div>
</div>

Каждый компонент шага имеет свойство заголовка.

Таким образом, чтобы изменить структуру вкладки, мне нужно изменить ее здесь только один раз, если заголовок и кнопки входят в шаблон каждого компонента, тогда мне придется изменить шаблон каждого компонента, если я хочу изменить структура вкладок.

Как бы вы это сделали, есть ли лучший способ добиться такой структуры?

Спасибо!