Mat-Tab-Group не загружается, пока не нажата

Question

Итак, у меня проблема с моим угловым проектом.При первой загрузке приложения вкладки не отображаются.Однако, как только я нажимаю на приложение, я получаю вкладки, работающие просто отлично.

Соответствующий код выглядит так: 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>

И на app.component.html:

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