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 19eb376cd0db..1927afd2135c 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 @@ -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); 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 8ab3170ce8cd..449b97bc6380 100644 --- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts +++ b/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 {