[Tabs] Ink bar is not correctly aligned on init

Bug, feature request, or proposal:

Bug (Some different than https://github.com/angular/material2/issues/3044)

What is the expected behavior?

Highlighter [md-ink-bar] should invalidate position on init app

What is the current behavior?

Misaligned [md-ink-bar]. Please see attached image.

What are the steps to reproduce?

Case 1

1. Open demo application from material2
2. Navigate to tabs (Especially for Tab Nav Bar with routing example)
3. Apply md-stretch-tabs directive for <nav> and apply styles for tab items [md-stretch-tabs] [md-tab-link] { flex-basis: 0; flex-grow: 1; }
4. Try to expand / collapse application sidebar.

Case 2 (or just apply attached git patch. )

1. Open demo application from material2
2. Setup <md-sidenav mode=“side” opened=“true”> for root app container.
3. Navigate to tabs (Especially for Tab Nav Bar with routing example)
4. Apply md-stretch-tabs directive for <nav> and apply styles for tab items [md-stretch-tabs] [md-tab-link] { flex-basis: 0; flex-grow: 1; }
5. Select not first tab
6. Refresh page

Providing a Plunker (or similar) is the best way to get the team to see your issue. Patch: MD_TabBar_issue.patch.zip

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

Based on up to date sources of material2

Is there anything else we should know?

[Anderman]

I have this workarond

  @ViewChild(MatTabNav) public matTabNav: MatTabNav;
  public ngAfterViewChecked(): void {
    setTimeout(() => this.matTabNav._alignInkBar(), 0);
  }

[omaracrystal]

I also have ran into this issue. The mat-ink-bar does not recalculate when there is a material side nav with the mode set to “side”. Here is my work around with css (I am hiding the mat-ink-bar and using &:after styling):

• (add this to your global styles so it takes effect throughout your app)

.mat-tab-label-active {
    .mat-tab-label-content {
      font-weight: bold;
      color: black;

      &:after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background: $blue-3;
        right: 0;
        bottom: 0;
      }
   }
}

mat-ink-bar {
  display: none !important;
}