Tabs title and content broken when using *ngFor

[rubenlg]

Bug, feature request, or proposal:

Here is a plunker based on the template provided on the root README.md:
http://plnkr.co/edit/CFJy3QkubNIzlm6ZUvzn?p=preview

What is the expected behavior?

Tabs labels are always visible, regardless of whether they are static or dynamic. Content is visible for the current tab.

What is the current behavior?

Only static tab labels are visible (i.e. the last tab) until you click on one of them. No content is visible, not even for the static tab.
If I change the CSS for ".md-tab-body[_ngcontent-nxk-3]" to drop the "display: none" rule from the chrome inspector, then I can see the content for the static tab, but for dynamic tabs I have to click twice to see their content.

What are the steps to reproduce?

http://plnkr.co/edit/CFJy3QkubNIzlm6ZUvzn?p=preview (based on your template)

What is the use-case or motivation for changing an existing behavior?

Make tabs work when generated dynamically via ngFor.

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

Not sure, whatever you bundle on your plunker template.

Is there anything else we should know?

Part of the issues are potentially related to #957, although my plunker exposes a few other issues.

[FernandoFigueroa]

Posting this here since it helped me to bypass a bug that got me stuck for a couple of hours. I had a similar error while testing a component that implemented *ngFor generated tabs, the label and content were not displayed until i called the click method in the active tab:

it('should render the tabs section', fakeAsync(() => {
builder.createAsync(TestComponent).then((fixture: ComponentFixture<TestComponent>) => {
fixture.detectChanges();
tick();
fixture.debugElement.nativeElement.querySelector('.md-active').click();
fixture.detectChanges();
});
}));

Also, had to use fakeAsync + tick to get it going, really don't know why either.

[jelbourn]

This should be fixed in md-tabs by #1079

[stefanofalasca]

I still have this problem. md-tab not work creating it dynamically, like this:

<md-tab [label]="item.label" *ngFor="let item of items">

[agent0]

A similar Problem occurs when defining Tabs inside a display:none div and then changing to visible. The headers are shown but the active tab indicator is not.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}