title: Mat-Tab-Group not loading until clicked
body: <p>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. </p>
  
  <p>The relevant code is this: 
  In rooms.component.html:</p>
  
  <pre><code>&lt;mat-tab-group color="accent" class="rooms"&gt;
  &lt;mat-tab *ngFor="let room of rooms"
  [class.selected]=" room === selectedRoom"
  (click)="onSelect(room)" label="{{room.name}}"&gt;
  &lt;mat-card class="example-card"&gt;
      &lt;mat-card-header&gt;
        &lt;div mat-card-avatar class="example-header-image"&gt;&lt;/div&gt;
        &lt;mat-card-title&gt;{{room.name}}&lt;/mat-card-title&gt;
        &lt;mat-card-subtitle&gt;${{room.price}} por noche&lt;/mat-card-subtitle&gt;
      &lt;/mat-card-header&gt;
      &lt;img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu"&gt;
      &lt;mat-card-content&gt;
        &lt;p&gt;
          Equipada con:
          -Cafetera
          -Minibar
          -Garrafa de agua
          -TV
          -Reloj Despertador
          -Baño
          -Secadora de pelo
          -Ducha de agua caliente
        &lt;/p&gt;
      &lt;/mat-card-content&gt;
      &lt;mat-card-actions&gt;
        &lt;button mat-raised-button&gt;Reservar&lt;/button&gt;
        &lt;button mat-button&gt;Compartir&lt;/button&gt;
      &lt;/mat-card-actions&gt;
    &lt;/mat-card&gt;
  &lt;/mat-tab&gt;
  &lt;/mat-tab-group&gt;
  </code></pre>
  
  <p>And on app.component.html:</p>
  
  <pre><code>&lt;mat-toolbar color="primary"&gt;
    {{ title }}
  &lt;/mat-toolbar&gt;
  &lt;app-rooms&gt;&lt;/app-rooms&gt;
  </code></pre>