diff --git a/src/lib/tabs/tab-group.spec.ts b/src/lib/tabs/tab-group.spec.ts index 0fdf1f0c374e..819164b3c729 100644 --- a/src/lib/tabs/tab-group.spec.ts +++ b/src/lib/tabs/tab-group.spec.ts @@ -622,7 +622,7 @@ describe('nested MatTabGroup with enabled animations', () => { beforeEach(fakeAsync(() => { TestBed.configureTestingModule({ imports: [MatTabsModule, BrowserAnimationsModule], - declarations: [NestedTabs] + declarations: [NestedTabs, TabsWithCustomAnimationDuration] }); TestBed.compileComponents(); @@ -635,6 +635,14 @@ describe('nested MatTabGroup with enabled animations', () => { tick(); }).not.toThrow(); })); + + it('should not throw when setting an animationDuration without units', fakeAsync(() => { + expect(() => { + let fixture = TestBed.createComponent(TabsWithCustomAnimationDuration); + fixture.detectChanges(); + tick(); + }).not.toThrow(); + })); }); @@ -861,3 +869,14 @@ class TabGroupWithAriaInputs { }) class TabGroupWithIsActiveBinding { } + + +@Component({ + template: ` + + Tab one content + Tab two content + + `, +}) +class TabsWithCustomAnimationDuration {} diff --git a/src/lib/tabs/tab-group.ts b/src/lib/tabs/tab-group.ts index 241608397ebc..5385bd5ab3e5 100644 --- a/src/lib/tabs/tab-group.ts +++ b/src/lib/tabs/tab-group.ts @@ -129,8 +129,13 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn /** Position of the tab header. */ @Input() headerPosition: MatTabHeaderPosition = 'above'; - /** Duration for the tab animation. Must be a valid CSS value (e.g. 600ms). */ - @Input() animationDuration: string; + /** Duration for the tab animation. Will be normalized to milliseconds if no units are set. */ + @Input() + get animationDuration(): string { return this._animationDuration; } + set animationDuration(value: string) { + this._animationDuration = /^\d+$/.test(value) ? value + 'ms' : value; + } + private _animationDuration: string; /** Background color of the tab group. */ @Input()