Mat-Tab-Group not loading until clicked

So I'm having a problem with my angular project. When the application first loads, the tabs do not display. However, once I click on the application I get the tabs working just fine.

The relevant code is this: In rooms.component.html:

<mat-tab-group color="accent" class="rooms">
<mat-tab *ngFor="let room of rooms"
[class.selected]=" room === selectedRoom"
(click)="onSelect(room)" label="{{room.name}}">
<mat-card class="example-card">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>{{room.name}}</mat-card-title>
      <mat-card-subtitle>${{room.price}} por noche</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
    <mat-card-content>
      <p>
        Equipada con:
        -Cafetera
        -Minibar
        -Garrafa de agua
        -TV
        -Reloj Despertador
        -Baño
        -Secadora de pelo
        -Ducha de agua caliente
      </p>
    </mat-card-content>
    <mat-card-actions>
      <button mat-raised-button>Reservar</button>
      <button mat-button>Compartir</button>
    </mat-card-actions>
  </mat-card>
</mat-tab>
</mat-tab-group>

And on app.component.html:

<mat-toolbar color="primary">
  {{ title }}
</mat-toolbar>
<app-rooms></app-rooms>

Try using <ng-template ngFor let-room [ngForOf]="rooms"><mat-tab></mat-tab></ng-template>

instead of <mat-tab *ngFor="let room of rooms"></mat-tab>.
I hope this help if someone have same issue.
If it now working, you can try using lazy-loadig: <ng-template matTabContent>