When all tab-panel with ng-If conditions, and the conditions is depend on webapi,tabview will crash.

[magicdict]

I'm submitting a ... (check one with "x")

[X ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

When all tab-panel with ng-If conditions, and the conditions is depend on webapi,tabview will crash.

https://stackblitz.com/edit/github-euy9at?file=src/app/app.component.ts

<div>
  <p-tabView>
    <p-tabPanel header="Title1" *ngIf="IsShowTab1"></p-tabPanel>
    <p-tabPanel header="Title2" *ngIf="IsShowTab2"></p-tabPanel>
  </p-tabView>

  <p-tabView>
    <p-tabPanel header="Title0"></p-tabPanel>
    <p-tabPanel header="Title1" *ngIf="IsShowTab1"></p-tabPanel>
    <p-tabPanel header="Title2" *ngIf="IsShowTab2"></p-tabPanel>
  </p-tabView>
</div>

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  constructor(private http: HttpClient) {}
  ngOnInit(): void {
    this.http
      .get('www.baidu.com')
      .toPromise<any>()
      .then((r) => {
        console.log('google');
        this.SetTitle();
      })
      .catch((r) => {
        console.log('google');
        this.SetTitle();
      });
  }
  SetTitle() {
    this.IsShowTab1 = true;
    this.IsShowTab2 = false;
  }
  IsShowTab1 = undefined;
  IsShowTab2 = undefined;
}

I find the commit

Fixed #10837 - TabView: p-tabview-ink-bar doesn't follow the size of …

  set header(header: string) {
        this._header = header;
        this.tabView.updateInkBar();
        this.tabView.cd.markForCheck();
    }

      updateInkBar() {
        if (this.navbar) {
            let tabHeader = DomHandler.findSingle(this.navbar.nativeElement, 'li.p-highlight');
            this.inkbar.nativeElement.style.width = DomHandler.getWidth(tabHeader) + 'px';
            this.inkbar.nativeElement.style.left =  DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.navbar.nativeElement).left + 'px';
        }
    }

updateInkBar method will cause a exception,because tabHeader will be null(the webapi result has not received and all tabpanel is null,there has not highlight tabpanel).
Will you kindly check the tabHeader is null or not before set Style,

Please tell us about your environment:

• Angular version: 13

• PrimeNG version: Since 13.0.3

• Browser: all

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap?
Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,