angulartypescriptprimengtabview

primeNG TabView won't show content onInit

I have a problem with the primeNG component TabView. I am trying to build a custom lib with primeNG as base. Therefore, I have implemented a tabs component and a tab-item component

In my first try, every content of the items was displayed in the last tab. I've read that instead of

tabs-component:
<p-tabView>
  <p-tabPanel [header]="tab.header" *ngFor="let tab of tabs; let i = index [selected]="i == 0"">
    <ng-content></ng-content>
  </p-tabPanel>
</p-tabView>

tab-item-component:
<ng-content></ng-content>

I have to use ngTemplateOutlet

tabs:
<p-tabView>
  <p-tabPanel [header]="tab.header" *ngFor="let tab of tabs; let i = index [selected]="i == 0"">
    <ng-container *ngTemplateOutlet="tab.template"></ng-container>
  </p-tabPanel>
</p-tabView>

tab-item:
<ng-template>
  <ng-content></ng-content>
</ng-template>

and in typescript:

export class TabsComponent {
  @ContentChildren(TabItemComponent) tabs!: QueryList<TabItemComponent>;
}

export class TabItemComponent implements OnInit {
  @Input()
  header: string = "";

  @ViewChild(TemplateRef)
  template!: TemplateRef<any>;
}

But, since the changes to ngTemplateOutlet, the content of the default selected tab 0 won't display on startup, although you can see that the first tab is selected. You have to click on a tab to see the content.

What do I need to change?

Solution

  • Ok I did it myself. You have to extend the ViewChild of the TemplateRef with a static option.

    @ViewChild(TemplateRef, { static: true })

    static - True to resolve query results before change detection runs, false to resolve after change detection. Defaults to false.

    Thanks for your help