tabs: ink bar calculated incorrectly with setTimeout

[fxck]

Repro https://stackblitz.com/edit/materia2-tabs-dialog-problem?file=app%2Fapp.component.ts

Possibly related: #10498

cc @mmalerba

Workaround would probably be to make the dialog component work without setTimeout, but that unfortunately causes

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'id: undefined'. Current value: 'id: mat-dialog-1'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook?

[fxck]

It looks like setTimeout is the correct workaround for this (angular/angular#15634), so material should probably provide a way to refresh the ink bar (perhaps making _alignInkBarToSelectedTab public and exposing header) / make it work properly by default, same as with the form-field.

[crisbeto]

#10343 will expose the method for recalculating the ink bar.

[fxck]

Would be nice to find out why is this happening anyway.

Is realignInkBar going to animate the ink bar (it would be unwanted in case)?

[crisbeto]

FWIW your example seems to work correctly for me, but what I'm guessing is happening is that we try to measure the tab width too early while it's still animating, which returns a wrong value. Also yes, realignInkBar will animate the ink bar.

[fxck]

What browser are you using? Doesn't work on chrome on mac, nor on chrome on my phone..

[crisbeto]

It worked for me on Chrome on both PC and Mac, but it didn't on iOS.

[fxck]

Strange.

[amysorto]

Closing this issue since this affects only the legacy components now