Here is a plunker based on the template provided on the root README.md:
http://plnkr.co/edit/CFJy3QkubNIzlm6ZUvzn?p=preview
Tabs labels are always visible, regardless of whether they are static or dynamic. Content is visible for the current tab.
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.
http://plnkr.co/edit/CFJy3QkubNIzlm6ZUvzn?p=preview (based on your template)
Make tabs work when generated dynamically via ngFor.
Not sure, whatever you bundle on your plunker template.
Part of the issues are potentially related to https://github.com/angular/material2/issues/957, although my plunker exposes a few other issues.
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._
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.