diff --git a/src/lib/tabs/tab-body.ts b/src/lib/tabs/tab-body.ts index 78daac79243..4a34f03ce78 100644 --- a/src/lib/tabs/tab-body.ts +++ b/src/lib/tabs/tab-body.ts @@ -55,6 +55,7 @@ export type MdTabBodyOriginState = 'left' | 'right'; }, animations: [ trigger('translateTab', [ + state('void', style({transform: 'translate3d(0, 0, 0)'})), state('left', style({transform: 'translate3d(-100%, 0, 0)'})), state('left-origin-center', style({transform: 'translate3d(0, 0, 0)'})), state('right-origin-center', style({transform: 'translate3d(0, 0, 0)'})), diff --git a/src/lib/tabs/tab-group.spec.ts b/src/lib/tabs/tab-group.spec.ts index c34e89e1298..b01c7dde0fa 100644 --- a/src/lib/tabs/tab-group.spec.ts +++ b/src/lib/tabs/tab-group.spec.ts @@ -3,7 +3,7 @@ import { } from '@angular/core/testing'; import {MdTabGroup, MdTabsModule, MdTabHeaderPosition} from './index'; import {Component, ViewChild} from '@angular/core'; -import {NoopAnimationsModule} from '@angular/platform-browser/animations'; +import {NoopAnimationsModule, BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {By} from '@angular/platform-browser'; import {Observable} from 'rxjs/Observable'; import {MdTab} from './tab'; @@ -290,6 +290,26 @@ describe('MdTabGroup', () => { } }); + +describe('nested MdTabGroup with enabled animations', () => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdTabsModule.forRoot(), BrowserAnimationsModule], + declarations: [NestedTabs] + }); + + TestBed.compileComponents(); + })); + + it('should not throw when creating a component with nested tab groups', async(() => { + expect(() => { + let fixture = TestBed.createComponent(NestedTabs); + fixture.detectChanges(); + }).not.toThrow(); + })); +}); + + @Component({ template: ` + Tab one content + + Tab two content + + Inner content one + Inner content two + + + + `, +}) +class NestedTabs {} +