Components: [Tabs] Ink bar is not correctly aligned on init

[VitalyVrublevskyy]

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
   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 for root app container.
3. Navigate to tabs (Especially for _Tab Nav Bar_ with routing example)
4. Apply md-stretch-tabs directive for
   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?

[jarekskuder]

Same here on iOS 10.3.2 cordova app

[levz0r]

Hi,
Any plans to fix this?

[Anderman]

Is there a workarond for this?

[Anderman]

I have this workarond

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

[bentaly]

This has changed to _alignInkBarToSelectedTab in Angular 8

[dhair-seva]

This is happening to me, because my sidebar for the entire app has a width change on route change, so if I have a mat-tab-group in any page, I would have to implement this, which means, I would have to do this in over 10+ pages. This workaround is not a good fix for my use-case. Is there another fix, globally?

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

[IgorKurkov]

So it does not work till now.
Workaround by @Anderman with ngAfterViewChecked() works but might cause performance problems.
In my case content loads, and causes a vertical scrollbar, it resizes the page a bit (but window.onresize doesn't catch this resize event, so can't catch it yet), and sets the wrong alignment to mat-ink. My workaround - listen for routing event, wait for content loading by setTimeout with 1sec delay and realign mat-ink. But it is awful :) wait for a better neat solution

@ViewChild('matTabsRef', { static: false }) matTabsRef: MatTabNav;

fixResizeInkBar() {
  setTimeout(() => {
      if (this.matTabsRef) {
        this.matTabsRef._alignInkBarToSelectedTab();
      }
    }, 1000);
}

private listenRoutes(): void {
    this.subs.add(
      this.router.events
        .pipe(
          filter((event) => event instanceof NavigationEnd),
          startWith(true)
        )
        .subscribe((event) => {
          this.fixResizeInkBar();
        })
    );
  }