mat-tab-group that starts in hidden container does not show selection in header

[AlesDo]

What is the expected behavior?

When a tab group starts inside a container element that is hidden using [hidden]. Once the container element becomes visible the tab should render correctly and show the default selection in the header.

What is the current behavior?

If the mat-tab-group is inside a container ( for example <div>) that is hidden using [hidden] when a component renders the first time. When you set hidden to false afterwards to show the tab group the selection is not visible in the tab header. After you click to a different tab the header refreshes and then the selection is shown as expected.

What are the steps to reproduce?

Here is a StackBlitz sample that reproduces the issue. Once you click the button to make the tab group visible you can see that the header has no selection.

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

• Angular: 7.0.0 and 7.1.2
• Angular Material: 7.0.1 and 7.1.1
• OS: Windows: 10
• TypeScript: 3.1.3
• Browser: Version 70.0.3538.110 (Official Build) (64-bit)

Is there anything else we should know?

[schaetz]

I have a related issue: When a tab group with many elements is nested inside another element, such as another tab group, the arrow buttons to scroll through the tabs are only visible if the tab group is visible right after loading the page. If it is hidden at first you have to select an item for the arrows to show up.

I have also created a StackBlitz to illustrate the problem.

I assume that our issues have the same cause and would be happy to hear if there is any workaround.

[sanchezpablo]

Same problem here, demo: https://stackblitz.com/edit/angular-material-tabs-problem

[andrewseguin]

You can force the ink bar to re-align by calling realignInkBar().

https://stackblitz.com/edit/angular-3srg4v-gylvb5?file=app%2Ftab-group-basic-example.ts

The downside to this is that the ink bar will transition in, which may not be your intended effect.

We can explore the possibility of calling the function with a param that removes the animation. If you'd like this, feel free to open a new issue with the feature request.

[joeystdio]

Hi @andrewseguin, I see you closed this issue while it still persists and the link you added to something I suppose to be a workaround doesn't actually work.

[brunohenriquy]

@andrewseguin couldn't get your workaround to properly work!

[mikesimmonds]

For anyone coming across this issue. You can: add a @ViewChild reference to the mat-tab-group element in the .ts file and then call childRef.realignInkBar() when you change the parameter to un hide the element.

Stackblitz: https://stackblitz.com/edit/realighinkbar-example

[brunohenriquy]

For anyone coming across this issue. You can: add a @ViewChild reference to the mat-tab-group element in the .ts file and then call childRef.realignInkBar() when you change the parameter to un hide the element.

Stackblitz: https://stackblitz.com/edit/realighinkbar-example

Note that when you select the second tab, for example, hide the tabs and then show them again, the selected tab does not return to the first one. It remains the last selection.

[waqas2023]

For anyone coming across this issue. You can: add a @ViewChild reference to the mat-tab-group element in the .ts file and then call childRef.realignInkBar() when you change the parameter to un hide the element.

Stackblitz: https://stackblitz.com/edit/realighinkbar-example

Showing me compile error on viewchild:

Argument of type '{ static: boolean; }' is not assignable to parameter of type '{ read?: any; }'.

[mikesimmonds]

For anyone coming across this issue. You can: add a @ViewChild reference to the mat-tab-group element in the .ts file and then call childRef.realignInkBar() when you change the parameter to un hide the element.
Stackblitz: https://stackblitz.com/edit/realighinkbar-example

Note that when you select the second tab, for example, hide the tabs and then show them again, the selected tab does not return to the first one. It remains the last selection.

You can use selectedIndex on the element to store the current tab index.

See updated Stackblitz: https://stackblitz.com/edit/realighinkbar-example

[mikesimmonds]

For anyone coming across this issue. You can: add a @ViewChild reference to the mat-tab-group element in the .ts file and then call childRef.realignInkBar() when you change the parameter to un hide the element.
Stackblitz: https://stackblitz.com/edit/realighinkbar-example

Showing me compile error on viewchild:

Argument of type '{ static: boolean; }' is not assignable to parameter of type '{ read?: any; }'.

Do you mean in the Stackblitz example or in your own project? If it is in your own project you may be on an older Angular version which does not require the {static: boolean} option - you can just remove it.

edit: spelling

[brunohenriquy]

For anyone coming across this issue. You can: add a @ViewChild reference to the mat-tab-group element in the .ts file and then call childRef.realignInkBar() when you change the parameter to un hide the element.
Stackblitz: https://stackblitz.com/edit/realighinkbar-example

Note that when you select the second tab, for example, hide the tabs and then show them again, the selected tab does not return to the first one. It remains the last selection.

You can use selectedIndex on the element to store the current tab index.

See updated Stackblitz: https://stackblitz.com/edit/realighinkbar-example

I've tried it before without success, but now it works in your example inserting this.selectedIndex = 0;

toggleExpandCard() {
this.selectedIndex = 0;
this.tabs.realignInkBar(); // Remove this line to 'break' the example
this.isHidden = !this.isHidden;
}

I'm gonna try on my project, thank you very much!

[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.}