Tab bar doesn't show up even tab items are updated

Hi everyone,

Recently I created a tabbar in which ion-tab items are not defined at first after the page view. So tabbar is not shown, which is logical to me in my opinion.

home.ts

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {
    
    pages:any = [];
    constructor(){
      //update the pages after 2 seconds
      setTimeout(()=>{
       this.pages = [
         {title: 'Featured', root:FeatureProductsPage},
         {title: 'Power', root:OtherProductsPage},
         {title: 'Luggage', root:OtherProductsPage},
         {title: 'Toiletries', root:OtherProductsPage}
       ];
    }, 2000)
}

home.html

<ion-content>
<ion-tabs tabsPlacement="top" tabsHighlight="true">
  <ion-tab *ngFor="let p of pages" [tabTitle]="p.title" [root]="p.root"></ion-tab>
</ion-tabs>
</ion-content>

After 2 seconds, ion-tab items are added as expected. I checked it with console. However the problem is the tabbar just won’t show up, I tested the only way to show it is to tap on it when it is still not visible, and it will show up as usual. I suspect it is something to do with tab initialization after the page view so if possible I would like to initialize the tabbar manually after 2 seconds. I have checked the docs but seems there is no documentation regarding this.

Any help would be appreciated. Thanks.