title: Angular's mat-expansion-panel showing content when collapsed
body: <p><a href="https://i.stack.imgur.com/Z8WJN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z8WJN.png" alt="Picture"></a></p>
  
  <p>As you can see the TestGroup1 panel is showing that it is collapsed (based on the arrow) but yet I can still see the content of the panel. When I click it, it opens and closes normally (like TestGroup2). </p>
  
  <p>I do have this in my expansion panel <code>[expanded]="panelOpenState"</code>
  Which is based on this that is set to a button above. Initially, it's set to false.</p>
  
  <pre><code>togglePanel() {
  this.panelOpenState = !this.panelOpenState;
  }
  </code></pre>
  
  <p>Html code</p>
  
  <pre><code>      &lt;div class="component-panel-body"&gt;
      &lt;mat-expansion-panel *ngFor="let group of groups[selectedDeviceSource.id]" [expanded]="panelOpenState"&gt;
        &lt;mat-expansion-panel-header&gt;
          &lt;mat-panel-title&gt; {{ group.name }} &lt;/mat-panel-title&gt;
        &lt;/mat-expansion-panel-header&gt;
          &lt;table class="table table-striped table-hover"&gt;
            &lt;thead&gt;
            &lt;tr&gt;
              &lt;th class="qkFix"&gt;{{'TEAMVIEWER.DEVICE-ID' | translate}}&lt;/th&gt;
              &lt;th class="qkFix"&gt;{{'TEAMVIEWER.ALIAS' | translate}}&lt;/th&gt;
              &lt;th class="qkFix"&gt;{{'TEAMVIEWER.STATUS' | translate}}&lt;/th&gt;
              &lt;th class="qkFix"&gt;{{'TEAMVIEWER.OPTIONS' | translate}}&lt;/th&gt;
            &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
            &lt;tr class="user-item" *ngFor="let device of group.devices" (click)="$event.stopPropagation()"&gt;
              &lt;td class="qkFix"&gt;{{ device.deviceId }}&lt;/td&gt;
              &lt;td class="qkFix"&gt;{{ device.alias }}&lt;/td&gt;
              &lt;td class="qkFix" *ngIf="device.onlineState == 'Online'" ngClass="colorOnline"&gt;{{ device.onlineState }}
                &lt;span class="dotOnline"&gt;&lt;/span&gt;
              &lt;/td&gt;
              &lt;td class="qkFix" *ngIf="device.onlineState == 'Offline'" ngClass="colorOffline"&gt;{{ device.onlineState }}
                &lt;span class="dotOffline"&gt;&lt;/span&gt;
              &lt;/td&gt;
              &lt;td class="qkFix"&gt;
                &lt;button type="button" class="btn btn-default btn-xs" (click)="$event.stopPropagation(); showDevice(device); editDeviceDialog()"&gt;
                  &lt;i class="material-icons"&gt;{{ (auth.hasPermissions(['update-devices'], true)) ? 'edit' : 'open_in_new'}}&lt;/i&gt;
                &lt;/button&gt;
                &lt;button [disabled]="!(auth.hasPermissions(['delete-devices'], true))" type="button" class="btn btn-default btn-xs" (click)="$event.stopPropagation();deleteDevice(device)"&gt;
                  &lt;i *ngIf="(auth.hasPermissions(['delete-devices'], true))" class="material-icons" (click)="$event.stopPropagation();deleteDevice(device)"&gt;delete&lt;/i&gt;
                  &lt;i *ngIf="!(auth.hasPermissions(['delete-devices'], true))" class="material-icons" (click)="$event.stopPropagation()"&gt;delete&lt;/i&gt;
                &lt;/button&gt;
                &lt;button *ngIf="device.onlineState == 'Online'" [disabled]="!(auth.hasPermissions(['remote-control'], true))" type="button" class="btn btn-default btn-xs" (click)="$event.stopPropagation(); remoteSession(device)"&gt;
                  &lt;i *ngIf="(auth.hasPermissions(['remote-control'], true))" (click)="$event.stopPropagation();remoteSession(device)" class="material-icons"&gt;swap_horiz&lt;/i&gt;
                  &lt;i *ngIf="!(auth.hasPermissions(['remote-control'], true))" (click)="$event.stopPropagation()" class="material-icons"&gt;swap_horiz&lt;/i&gt;
                &lt;/button&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/mat-expansion-panel&gt;
    &lt;/div&gt;
  </code></pre>