Angular-在不同的父元素中动态添加组件

Question

I want to build a multi-step form, where each step is its own tab and the user can go forward/backwards through the form. Each tab has a header, content and navigation buttons.

In my form component, I have an array of all components (each represents a step in the form) and I want to loop through it in the form's template, so that each step has the same structure and if I want to change that structure I should only change the code in the loop, as it's the same for all steps.

This is the array in the form.component.ts :

steps = [
    LanguageComponent,
    CodeComponent,
    HardwareComponent,
    SubmissionComponent
]

Or should it be:

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

?

This is the pseudo form.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>

Each step component has header property.

That way, in order to change the structure of the tab, I only have to change it here once, if the header and buttons go inside each components' template, then I will have to change each component's template, if I want to change the tab structure.

How would you do this, is there a better way to achieve this structure?

Thank you!

Answer 1

You need a placeholder component that houses the form tab structure. Then like you said you only have 1 place that you would have to change the layout.

AppFormTabComponent.html

<ngb-tabset>
    <ngb-tab>
        <ngbTemplate>
           <language-component [form]="form"></language-component>
        </ngbTemplate>
    </ngb-tab>
    <ngb-tab>
        <ngbTemplate>
           <code-component [form]="form"></code-component>
        </ngbTemplate>
    </ngb-tab>
    ...
</ngb-tabset>

Then you would only call your AppFormTabComponent once to use it

form.component.html

<app-form-tab-component [form]="form"></app-form-tab-component>

And your form would be in the app.component.ts page and you would pass the form in to each one of your templates.