While I am loading data from the server and displaying it in ng-content, I am encountering an issue with making the first tab active by default.
When using static content like the example below, the first tab is set as active without any problems:
<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>
However, when retrieving data from the server as shown in the code snippet below, the first tab is not being set as active:
<app-tabs>
<app-tab *ngFor="let tab of tabDataFromServer" [title]="tab.name"> </app-tab>
</app-tabs>
If you want to test the app, you can view it at this URL:
For editing purposes, you can access the editor at: https://stackblitz.com/edit/angular-ivy-jvyzgn?file=src/app/tabs/tabs.component.ts
If anyone has a solution to this issue, please feel free to help. Thank you in advance :)