refactor(tabs): provide method for re-aligning the ink bar

[crisbeto]

Adds the realignInkBar method to the MatTabGroup which allows consumers to re-align the ink bar programmatically. This is useful for the cases where Material can't figure out that it needs to be re-aligned or doing so would be very inefficient.

Fixes #10340.

[josephperrott]

Can we add a test in for this?

[crisbeto]

We could, although these tests that have to do with element dimensions/positioning tend to be very flaky.

[johnedvard]

I am not able to make this work. I am subscribing to a change in the menu toggle (when the matsidenav is opening or closing), and then I realign the nav bar each time a toggle happens, but the aligning is still not correct :/

[johnedvard]

I experimented using a timeout like this:

setTimeout(() => {
  this.tabGroup.realignInkBar();
}, 300);

This will align the inkbar, but it has to wait for the first animation to finish (being pushed because the sidenav is expanding), and then animate back to the correct position. I will try to make a Stackblitz to illustrate what I mean. Maybe I am doing something fundamentally wrong to begin with.

[koverda]

@crisbeto how would i use this realignInkBar() method in a component? having some trouble setting up the references, and the main app module

[prestonvanloon]

@koverda

Add a view child on your component then call realignInkBar.

export class MyComponent {
  @ViewChild(MatTabGroup) tabGroup: MatTabGroup

   someMethod() {
     this.tabGroup.realignInkBar();
   }
}

At least I think that is the intended behavior. I did not try it.

[koverda]

Thank you @prestonvanloon

Just as a side note for anyone who ends up having the same issue. If you're using a mat-tab-nav-bar, you do the following (it's pretty much the same thing as for the MatTabGroup):

export class MyComponent {
  @ViewChild(MatTabNav) tabGroup: MatTabNav

   someMethod() {
     this.tabGroup._alignInkBar();
   }
}

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