How to create dynamic tabs with Tabset component using a child component?

Question

Recently I started to develop with Angular and ng-bootstrap. I'm working on a form with the help of Reactive Forms which contains some FormControls and a nested FormArray. For each element in the FormArray, I want to display a child component that belongs to a tab of a Tabset component of ng-bootstrap but the child component doesn't render.

The form is divided into two components: MainForm and SubForm. MainForm contains some FormControls, one FormArray, an instance of Tabset and instance of SubForm for each element in FormArray. SubForm is a tab of Tabset that contains a nested form some input fields.

When I render MainForm an API call is fired and returns some data to fill the form. FormControls and FormArray of MainForm are filled but SubForm doesn't render.

I reproduced the issue with the minimal configuration in a link using Stackblitz.

yurzui yurzui · Accepted Answer · 2019-08-11T18:29:31

The issue here is that NgbTabSet component can't initialize NgbTab directives which are created inside SubForm because NgbTabSet requires NgbTab to be ContentChildren

It means you have to keep ngb-tab elements inside ngb-tabset as projected content:

main-form.component.html

<ngb-tabset type="pills" [destroyOnHide]="true">
  <ngb-tab *ngFor="let hobbie of hobbies.controls; let i=index" [attr.id]="index">
    <ng-template ngbTabTitle>
      <span>Hobbie {{ i + 1 }}</span>
    </ng-template>
    <ng-template ngbTabContent>
        <app-sub-form [subForm]="hobbie"></app-sub-form>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

I also think that it forces you to keep your SubForm component not to be dependent on NgbTabSet so you can use this form somewhere else.

Forked Stackblitz

How to create dynamic tabs with Tabset component using a child component?

1 Answers