From 00e933824bac337b57642140d5a69c7547908b15 Mon Sep 17 00:00:00 2001 From: Joey Perrott Date: Wed, 4 Oct 2017 18:30:37 -0700 Subject: [PATCH] feat(nav-tabs): add `mat-tab-label-active` class to active nav tab labels (#7508) --- src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts | 18 ++++++++++++++++++ src/lib/tabs/tab-nav-bar/tab-nav-bar.ts | 3 ++- 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts index 3aa7542e9c5a..fa0149135546 100644 --- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts +++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts @@ -49,6 +49,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); diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts index 9c8dcef2bceb..0615446f0e50 100644 --- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts +++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts @@ -184,7 +184,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 {