fix(tabs): hide mat-tab-nav-bar ink bar when no link is active (#9701)

Currently the `mat-tab-nav-bar` updates the ink bar location whenever a link becomes active, however this doesn't account for the case where none of the links are active. These changes switch to checking for active links whenever the active state of any of the tabs changes and hiding the ink bar if none of them are active.

Fixes #9671.

Author: crisbeto

src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts

@@ -1,5 +1,5 @@
 import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
-import {Component, ViewChild} from '@angular/core';
+import {Component, ViewChild, ViewChildren, QueryList} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {dispatchFakeEvent, dispatchMouseEvent, createMouseEvent} from '@angular/cdk/testing';
 import {Direction, Directionality} from '@angular/cdk/bidi';
@@ -213,6 +213,17 @@ describe('MatTabNavBar', () => {
 
       expect(inkBar.alignToElement).toHaveBeenCalled();
     }));
+
+    it('should hide the ink bar when all the links are inactive', () => {
+      const inkBar = fixture.componentInstance.tabNavBar._inkBar;
+
+      spyOn(inkBar, 'hide');
+
+      fixture.componentInstance.links.forEach(link => link.active = false);
+      fixture.detectChanges();
+
+      expect(inkBar.hide).toHaveBeenCalled();
+    });
   });
 
   it('should clean up the ripple event handlers on destroy', () => {
@@ -271,6 +282,7 @@ describe('MatTabNavBar', () => {
 })
 class SimpleTabNavBarTestApp {
   @ViewChild(MatTabNav) tabNavBar: MatTabNav;
+  @ViewChildren(MatTabLink) links: QueryList<MatTabLink>;
 
   label = '';
   disabled: boolean = false;

src/lib/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -76,8 +76,8 @@ export class MatTabNav extends _MatTabNavMixinBase implements AfterContentInit,
   /** Subject that emits when the component has been destroyed. */
   private readonly _onDestroy = new Subject<void>();
 
-  _activeLinkChanged: boolean;
-  _activeLinkElement: ElementRef;
+  private _activeLinkChanged: boolean;
+  private _activeLinkElement: ElementRef | null;
 
   @ViewChild(MatInkBar) _inkBar: MatInkBar;
 
@@ -118,21 +118,22 @@ export class MatTabNav extends _MatTabNavMixinBase implements AfterContentInit,
     super(elementRef);
   }
 
-  /** Notifies the component that the active link has been changed. */
+  /**
+   * Notifies the component that the active link has been changed.
+   * @deletion-target 7.0.0 `element` parameter to be removed.
+   */
   updateActiveLink(element: ElementRef) {
-    this._activeLinkChanged = this._activeLinkElement != element;
-    this._activeLinkElement = element;
-
-    if (this._activeLinkChanged) {
-      this._changeDetectorRef.markForCheck();
-    }
+    // Note: keeping the `element` for backwards-compat, but isn't being used for anything.
+    this._activeLinkChanged = !!element;
+    this._changeDetectorRef.markForCheck();
   }
 
   ngAfterContentInit(): void {
     this._ngZone.runOutsideAngular(() => {
       const dirChange = this._dir ? this._dir.change : observableOf(null);
 
-      return merge(dirChange, this._viewportRuler.change(10)).pipe(takeUntil(this._onDestroy))
+      return merge(dirChange, this._viewportRuler.change(10))
+          .pipe(takeUntil(this._onDestroy))
           .subscribe(() => this._alignInkBar());
     });
 
@@ -142,6 +143,9 @@ export class MatTabNav extends _MatTabNavMixinBase implements AfterContentInit,
   /** Checks if the active link has been changed and, if so, will update the ink bar. */
   ngAfterContentChecked(): void {
     if (this._activeLinkChanged) {
+      const activeTab = this._tabLinks.find(tab => tab.active);
+
+      this._activeLinkElement = activeTab ? activeTab._elementRef : null;
       this._alignInkBar();
       this._activeLinkChanged = false;
     }
@@ -155,7 +159,10 @@ export class MatTabNav extends _MatTabNavMixinBase implements AfterContentInit,
   /** Aligns the ink bar to the active link. */
   _alignInkBar(): void {
     if (this._activeLinkElement) {
+      this._inkBar.show();
       this._inkBar.alignToElement(this._activeLinkElement.nativeElement);
+    } else {
+      this._inkBar.hide();
     }
   }
 
@@ -202,8 +209,8 @@ export class MatTabLink extends _MatTabLinkMixinBase
   @Input()
   get active(): boolean { return this._isActive; }
   set active(value: boolean) {
-    this._isActive = value;
-    if (value) {
+    if (value !== this._isActive) {
+      this._isActive = value;
       this._tabNavBar.updateActiveLink(this._elementRef);
     }
   }
@@ -223,7 +230,7 @@ export class MatTabLink extends _MatTabLinkMixinBase
   }
 
   constructor(private _tabNavBar: MatTabNav,
-              private _elementRef: ElementRef,
+              public _elementRef: ElementRef,
               ngZone: NgZone,
               platform: Platform,
               @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) globalOptions: RippleGlobalOptions,