[Tabs] Hidden tabs don't render expansion panels correctly

Bug, feature request, or proposal:

Bug.

What is the expected behavior?

A <md-expansion-panel [expanded]="false"> should not be expanded until explicitally opened. When inside a hidden tab, .mat-expansion-panel-content should have height : 0px

What is the current behavior?

Panel is collapsed but panetl’s content is visible. Problem occurs only if the accordion is in a hidden tab of a tab-group.

What are the steps to reproduce?

http://plnkr.co/edit/q6kXPH?p=preview

  <md-tab label="Working">
    <md-accordion>
        <md-expansion-panel [expanded]="false">
        <md-expansion-panel-header>
          You should see me
        </md-expansion-panel-header>
        <p>Yous should not see me</p>
      </md-expansion-panel>
    </md-accordion>
  </md-tab>
  <md-tab label="Not working">
    <md-accordion>
        <md-expansion-panel [expanded]="false">
        <md-expansion-panel-header>
          You should see me
        </md-expansion-panel-header>
        <p>Yous should not see me</p>
      </md-expansion-panel>
    </md-accordion>
  </md-tab>
</md-tab-group>

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material2 master Angular 4.2.3

[lula]

Hello! @julianobrasil, following @lebeker advice that’s working for me as a workaround:

<md-tab-group [(selectedIndex)]="selectedTabIndex">
  <md-tab label="First">
    <div>...</div>
  </md-tab>
  <md-tab label="Second">
    <div *ngIf="selectedTabIndex == 1">...</div>
  <md-tab>
  <md-tab label="Third">
    <div *ngIf="selectedTabIndex == 2">...</div>
  <md-tab>
</md-tab-group>

[bastienlemaitre]

Or use css ? It worked for me ! 😃

div.mat-expansion-panel-content:not(.mat-expanded) {
    height: 0px !important;
    visibility: hidden !important;
}

.mat-expansion-panel-header  {
    height: 48px;
}