primeNG TabView won't show content onInit


Good morning,

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

  <p-tabPanel [header]="tab.header" *ngFor="let tab of tabs; let i = index [selected]="i == 0"">


I have to use ngTemplateOutlet

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


and in typescript:

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

export class TabItemComponent implements OnInit {
  header: string = "";

  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.

Please help me, I’m loosing my mind over this.


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

Answered By – JSar

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.