fix(tabs): tab-nav-link disableRipple input not working (#10643)

* Fixes the `disableRipple` input on the `mat-tab-link` not working due to it being overwritten by the one from the `mat-tab-nav-bar`.
* Switches the nav bar to use the mixin for disabling the ripple and simplifies the ripple disabling logic.

Fixes #10636.

Author: crisbeto

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

@@ -97,20 +97,29 @@ describe('MatTabNavBar', () => {
         .toBe(true, 'Expected aria-disabled to be set to "true" if link is disabled.');
     });
 
-    it('should update the disableRipple property on each tab link', () => {
-      const tabLinkElements = fixture.debugElement.queryAll(By.directive(MatTabLink))
-        .map(tabLinkDebug => tabLinkDebug.componentInstance) as MatTabLink[];
-
-      expect(tabLinkElements.every(tabLink => !tabLink.disableRipple))
+    it('should disable the ripples on all tabs when they are disabled on the nav bar', () => {
+      expect(fixture.componentInstance.tabLinks.toArray().every(tabLink => !tabLink.rippleDisabled))
         .toBe(true, 'Expected every tab link to have ripples enabled');
 
-      fixture.componentInstance.disableRipple = true;
+      fixture.componentInstance.disableRippleOnBar = true;
       fixture.detectChanges();
 
-      expect(tabLinkElements.every(tabLink => tabLink.disableRipple))
+      expect(fixture.componentInstance.tabLinks.toArray().every(tabLink => tabLink.rippleDisabled))
         .toBe(true, 'Expected every tab link to have ripples disabled');
     });
 
+    it('should have the `disableRipple` from the tab take precendence over the nav bar', () => {
+      const firstTab = fixture.componentInstance.tabLinks.first;
+
+      expect(firstTab.rippleDisabled).toBe(false, 'Expected ripples to be enabled on first tab');
+
+      firstTab.disableRipple = true;
+      fixture.componentInstance.disableRippleOnBar = false;
+      fixture.detectChanges();
+
+      expect(firstTab.rippleDisabled).toBe(true, 'Expected ripples to be disabled on first tab');
+    });
+
     it('should update the tabindex if links are disabled', () => {
       const tabLinkElements = fixture.debugElement.queryAll(By.css('a'))
         .map(tabLinkDebugEl => tabLinkDebugEl.nativeElement);
@@ -219,7 +228,7 @@ describe('MatTabNavBar', () => {
 
       spyOn(inkBar, 'hide');
 
-      fixture.componentInstance.links.forEach(link => link.active = false);
+      fixture.componentInstance.tabLinks.forEach(link => link.active = false);
       fixture.detectChanges();
 
       expect(inkBar.hide).toHaveBeenCalled();
@@ -269,7 +278,7 @@ describe('MatTabNavBar', () => {
 @Component({
   selector: 'test-app',
   template: `
-    <nav mat-tab-nav-bar [disableRipple]="disableRipple">
+    <nav mat-tab-nav-bar [disableRipple]="disableRippleOnBar">
       <a mat-tab-link
          *ngFor="let tab of tabs; let index = index"
          [active]="activeIndex === index"
@@ -282,11 +291,11 @@ describe('MatTabNavBar', () => {
 })
 class SimpleTabNavBarTestApp {
   @ViewChild(MatTabNav) tabNavBar: MatTabNav;
-  @ViewChildren(MatTabLink) links: QueryList<MatTabLink>;
+  @ViewChildren(MatTabLink) tabLinks: QueryList<MatTabLink>;
 
   label = '';
-  disabled: boolean = false;
-  disableRipple: boolean = false;
+  disabled = false;
+  disableRippleOnBar = false;
   tabs = [0, 1, 2];
 
   activeIndex = 0;

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

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {Directionality} from '@angular/cdk/bidi';
-import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {Platform} from '@angular/cdk/platform';
 import {ViewportRuler} from '@angular/cdk/scrolling';
 import {
@@ -53,7 +52,7 @@ import {MatInkBar} from '../ink-bar';
 export class MatTabNavBase {
   constructor(public _elementRef: ElementRef) {}
 }
-export const _MatTabNavMixinBase = mixinColor(MatTabNavBase, 'primary');
+export const _MatTabNavMixinBase = mixinDisableRipple(mixinColor(MatTabNavBase, 'primary'));
 
 /**
  * Navigation component matching the styles of the tab group header.
@@ -63,15 +62,15 @@ export const _MatTabNavMixinBase = mixinColor(MatTabNavBase, 'primary');
   moduleId: module.id,
   selector: '[mat-tab-nav-bar]',
   exportAs: 'matTabNavBar, matTabNav',
-  inputs: ['color'],
+  inputs: ['color', 'disableRipple'],
   templateUrl: 'tab-nav-bar.html',
   styleUrls: ['tab-nav-bar.css'],
   host: {'class': 'mat-tab-nav-bar'},
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatTabNav extends _MatTabNavMixinBase implements AfterContentInit, CanColor,
-    OnDestroy {
+    CanDisableRipple, OnDestroy {
 
   /** Subject that emits when the component has been destroyed. */
   private readonly _onDestroy = new Subject<void>();
@@ -101,15 +100,6 @@ export class MatTabNav extends _MatTabNavMixinBase implements AfterContentInit,
   }
   private _backgroundColor: ThemePalette;
 
-  /** Whether ripples should be disabled for all links or not. */
-  @Input()
-  get disableRipple() { return this._disableRipple; }
-  set disableRipple(value: boolean) {
-    this._disableRipple = coerceBooleanProperty(value);
-    this._setLinkDisableRipple();
-  }
-  private _disableRipple: boolean = false;
-
   constructor(elementRef: ElementRef,
               @Optional() private _dir: Directionality,
               private _ngZone: NgZone,
@@ -137,8 +127,6 @@ export class MatTabNav extends _MatTabNavMixinBase implements AfterContentInit,
           .pipe(takeUntil(this._onDestroy))
           .subscribe(() => this._alignInkBar());
     });
-
-    this._setLinkDisableRipple();
   }
 
   /** Checks if the active link has been changed and, if so, will update the ink bar. */
@@ -166,13 +154,6 @@ export class MatTabNav extends _MatTabNavMixinBase implements AfterContentInit,
       this._inkBar.hide();
     }
   }
-
-  /** Sets the `disableRipple` property on each link of the navigation bar. */
-  private _setLinkDisableRipple() {
-    if (this._tabLinks) {
-      this._tabLinks.forEach(link => link.disableRipple = this.disableRipple);
-    }
-  }
 }
 
 
@@ -227,7 +208,7 @@ export class MatTabLink extends _MatTabLinkMixinBase
    * @docs-private
    */
   get rippleDisabled(): boolean {
-    return this.disabled || this.disableRipple;
+    return this.disabled || this.disableRipple || this._tabNavBar.disableRipple;
   }
 
   constructor(private _tabNavBar: MatTabNav,