[Tabs] Ink bar needs to be adjusted after fonts load

[macjohnny]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The ink bar for the tabs should be positioned correctly, even when using web fonts.

What is the current behavior?

When using a web font for the tab titles, the ink bar position/length is not calculated correctly on initialization. Clicking the currently active tab again or a different tab repositions the ink bar correctly.

If you click it again, it aligns correctly.

This is due to the web font not being present when the component is initialized and the ink bar position is calculated. When clicking the tab again, the web font is displayed correctly and hence the position is calculated correctly.

What are the steps to reproduce?

https://embed.plnkr.co/eOW495nHUT82YyKZt9Qt/
Throttle the network to 2G, to simulate a loading delay of the web font.

What is the use-case or motivation for changing an existing behavior?

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

Angular4, material 2.0.0-beta.5

[gioele-antoci]

@ViewChild(MatTabNav) navBar: MatTabNav;
document.fonts.ready.then(function() { this.navBar._inkBar.alignToElement(this.navBar._activeLinkElement.nativeElement) })```

In the meanwhile something like this would do it.

[aicokleinovink]

Something new on this issue? Ran into exactly the same thing with Angular Material 8+

[crisbeto]

This shouldn't be a problem anymore, because the ink bar width is set using a percentage.