Components: Tabs title and content broken when using *ngFor

Created on 15 Aug 2016  路  5Comments  路  Source: angular/components

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 https://github.com/angular/material2/issues/957, although my plunker exposes a few other issues.

P1

Most helpful comment

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.

All 5 comments

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.

This should be fixed in md-tabs by #1079

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

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.

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._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

shlomiassaf picture shlomiassaf  路  3Comments

constantinlucian picture constantinlucian  路  3Comments

crutchcorn picture crutchcorn  路  3Comments

RoxKilly picture RoxKilly  路  3Comments

michaelb-01 picture michaelb-01  路  3Comments