PrimeNg TabView does not work with observables

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 primeng@10.0.1.

https://github.com/primefaces/primeng/issues/9331

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>