add mat-tab-label-active class to active nav tab labels

Author: josephperrott

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

@@ -51,6 +51,24 @@ describe('MatTabNavBar', () => {
       expect(fixture.componentInstance.activeIndex).toBe(2);
     });
 
+    it('should add the active class if active', () => {
+      let tabLink1 = fixture.debugElement.queryAll(By.css('a'))[0];
+      let tabLink2 = fixture.debugElement.queryAll(By.css('a'))[1];
+      const tabLinkElements = fixture.debugElement.queryAll(By.css('a'))
+        .map(tabLinkDebugEl => tabLinkDebugEl.nativeElement);
+
+      tabLink1.nativeElement.click();
+      fixture.detectChanges();
+      expect(tabLinkElements[0].classList.contains('mat-tab-label-active')).toBeTruthy();
+      expect(tabLinkElements[1].classList.contains('mat-tab-label-active')).toBeFalsy();
+
+      tabLink2.nativeElement.click();
+      fixture.detectChanges();
+      expect(tabLinkElements[0].classList.contains('mat-tab-label-active')).toBeFalsy();
+      expect(tabLinkElements[1].classList.contains('mat-tab-label-active')).toBeTruthy();
+
+    });
+
     it('should add the disabled class if disabled', () => {
       const tabLinkElements = fixture.debugElement.queryAll(By.css('a'))
         .map(tabLinkDebugEl => tabLinkDebugEl.nativeElement);

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

@@ -186,7 +186,8 @@ export const _MatTabLinkMixinBase = mixinDisabled(MatTabLinkBase);
     'class': 'mat-tab-link',
     '[attr.aria-disabled]': 'disabled.toString()',
     '[attr.tabindex]': 'tabIndex',
-    '[class.mat-tab-disabled]': 'disabled'
+    '[class.mat-tab-disabled]': 'disabled',
+    '[class.mat-tab-label-active]': 'active',
   }
 })
 export class MatTabLink extends _MatTabLinkMixinBase implements OnDestroy, CanDisable {