ContentChildren is undefined when loading the data from the server-CodePudding

I'm loading some data from server and populating it in ng-content. I'm also trying to make the first tab active by default .

If I use some static content like below , it is working fine (i.e first tab is made active)

<app-tabs>
   <app-tab [title]="'Tab 1'"></app-tab>
   <app-tab [title]="'Tab 2'"></app-tab>
   <app-tab [title]="'Tab 3'"></app-tab>
</app-tabs>

If I retrive the data from the server like below , first tab is not being active

<app-tabs>
    <app-tab *ngFor="let tab of tabDataFromServer" [title]="tab.name"> </app-tab>
</app-tabs>

App url : https://angular-ivy-jvyzgn.stackblitz.io

Editor url : https://stackblitz.com/edit/angular-ivy-jvyzgn?file=src/app/tabs/tabs.component.ts

Please help me out here to fix this . Thanks in advance :)

CodePudding user response：

The selection of the first tab is happening prematurely. One solution can be to ensure you have the tabDataFromServer array before creating <app-tabs>

<app-tabs *ngIf="tabDataFromServer.length">