I'm trying to populate PrimeNG TabView tabs by fetching data from the server. However, they don't seem to play well with Observables. I've posted an example here:
https://stackblitz.com/edit/primeng-nx7ryc?file=app%2Fapp.component.ts
Can you please suggest a workaround for this?
To handle the no-initial-items scenario, you could just put an *ngIf="this.items?.length" on your <p-tabView> element.
To handle both the no-initial-items and the one-initial-item scenarios, you could use the activeIndex property of <p-tabView>:
<p-tabView [activeIndex]="activeIndex"> <----- add [activeIndex] here
<p-tabPanel *ngFor="let item of items; let i = index" [header]="item.username" [selected]="i == 0">
[{{item.username}}]
</p-tabPanel>
</p-tabView>
Setting that value after your data has arrived will trigger <p-tabView> to refresh itself.
So your component would look like this:
items = [
{ username: "INITIAL"}
];
activeIndex: number; // <--- declare but don't initialize
constructor(private http: HttpClient) {}
ngOnInit(): void {
const source = this.get$();
const subscribe = source.subscribe(result => {
this.items = result.slice(0,3);
this.activeIndex = 0; // <---- set to 0 to trigger p-tabView refresh
});
}
Here's a fork of your StackBlitz demonstrating this approach.
I reported a very similar issue to the PrimeNG team and PrimeNG has fixed it with version 10.0.1. Try installing [email protected].
I have a similar case with the TabPanel. In PrimeNG 11 it does not respond to changes to the "isValidPaymentTerms" property. It only does it once you select the page.
<p-tabPanel header="Exceptional Payment Terms"
[selected]="Constants.C_PAYMENT == vTabSelected"
*[rightIcon]="isValidPaymentTerms ? '': 'fas fa-exclamation-triangle'"*>
...
</p-tabPanel>
