Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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?

Issue Analytics

State:
Created 5 years ago
Comments:12 (1 by maintainers)

Top GitHub Comments

4reactions

andrewseguincommented, Jan 16, 2019

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.

1reaction

mikesimmondscommented, Aug 7, 2019

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 <mat-tabs-group> element to store the current tab index.

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

Top Results From Across the Web

Angular material mat tab group in hidden container does not ...

A workaround I found to make my ink bar update and pagination occur correctly was to add a method to manually update header...

Tabs - Angular Material

Supports string and string array values, same as ngClass . Plain text label for the tab, used when there is no template label....

Control tab group appearance and behavior - MATLAB

Tab groups are containers for grouping and managing tabs. Use the uitabgroup function to create a tab group. By changing property values of...

Tab group with dynamically changing tabs - StackBlitz

<span class="example-input-label"> Selected. tab index: </span> ... <mat-checkbox #selectAfterAdding> Select ... <mat-tab-group [selectedIndex]="selected.

Angular Material mat-tab-group - GeeksforGeeks

mat-tab-group is used mainly for navbar requirements when we have multiple tabs to display. Installation: ng add @angular/material. Approach:.