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

[AlanCrevon]

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

[julianobrasil]

It seems to be working correctly here: http://plnkr.co/edit/q6kXPH?p=preview

[AlanCrevon]

correct. It's also working in another page of mine. Currently trying to isolate the pb.

[AlanCrevon]

Ok, i edit the issue : the problem occurs only if the element is in a hidden tab. Thanks @julianobrasil

[julianobrasil]

OK. Updated the plunker to reproduce it: http://plnkr.co/edit/q6kXPH?p=preview

Put it in the issue.

[emoralesb05]

This actually happens to anything that contains an animation when set inside a hidden md-tab.

[mzernetsch]

This seems to be caused by angular 4.2 changes.
I use Teradata Covalent expansion panels in my app which have the same problem since the new angular version: https://gitter.im/Teradata/covalent?at=593e58f06549436c7d3c8360

[julianobrasil]

😉 A very unacceptable workaround (but useful if you can't wait for the next release, possibly without this bug) is using a *ngIf and just show the accordion/expansion panel when it's needed (if it's needed when the page is loaded, put a variable in a setTimeout to trigger *ngIf in about 4 to 5 seconds after the tab-group has been rendered, or use the tab change event). In this case the expansion is shown in its expected state (collapsed or expanded).

[lebeker]

Hey! that bug is really annoying, is there any hope to see it's fix?) Maybe applying @julianobrasil solution with *ngIf=isActive on tabs content?