Estoy usando Angular y ngbNav para crear pestañas. El problema es que tengo nombres de pestañas de la API y para mostrarlos necesito ngFor, pero también para el contenido de la pestaña debo mostrar diferentes componentes. Para implementar eso, he usado ngSwitch.

 <ul ngbNav #nav="ngbNav" class="nav-tabs"> <li ngbNavItem *ngFor="let element of elements" [ngSwitch]="element.name"> <a ngbNavLink>{{element.name}}</a> <ng-template ngbNavContent *ngSwitchCase="'Super Item'"> <app-super-item ></app-super-item> </ng-template> <ng-template ngbNavContent *ngSwitchCase="'Another Item'"> <app-another-item ></app-another-item> </ng-template> <ng-template ngbNavContent *ngSwitchDefault><div>Default</div></ng-template> </li> </ul> <div [ngbNavOutlet]="nav"></div>

No sé cómo activar la primera pestaña en este caso. Todo funciona, pero solo después de hacer clic en la pestaña. Me gustaría tener la primera pestaña activa por defecto.