diff --git a/docs/info-drawer.component.md b/docs/info-drawer.component.md
index f0082c5e9a..d97c4fd5b3 100644
--- a/docs/info-drawer.component.md
+++ b/docs/info-drawer.component.md
@@ -29,6 +29,7 @@ Displays a sidebar-style information panel with tabs.
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| title | string | null | The title of the info drawer |
+| selectedIndex | number | 0 | The selected index tab |
| currentTab | any | null | The currently active tab |
## Details
diff --git a/lib/core/info-drawer/info-drawer.component.html b/lib/core/info-drawer/info-drawer.component.html
index 8006c2fdd4..45b406728b 100644
--- a/lib/core/info-drawer/info-drawer.component.html
+++ b/lib/core/info-drawer/info-drawer.component.html
@@ -7,7 +7,7 @@
-
+
@@ -19,4 +19,4 @@
-
\ No newline at end of file
+
diff --git a/lib/core/info-drawer/info-drawer.component.spec.ts b/lib/core/info-drawer/info-drawer.component.spec.ts
index 8c3c594b93..4cd21fcd6d 100644
--- a/lib/core/info-drawer/info-drawer.component.spec.ts
+++ b/lib/core/info-drawer/info-drawer.component.spec.ts
@@ -22,6 +22,7 @@ import { By } from '@angular/platform-browser';
import { MaterialModule } from '../material.module';
import { InfoDrawerLayoutComponent } from './info-drawer-layout.component';
import { InfoDrawerComponent } from './info-drawer.component';
+import { InfoDrawerTabComponent } from './info-drawer.component';
describe('InfoDrawerComponent', () => {
let element: HTMLElement;
@@ -73,21 +74,28 @@ describe('InfoDrawerComponent', () => {
@Component({
template: `
-
+
Fake Title Custom
+
+
+
+
`
})
-class CustomInfoDrawerComponent {
+class CustomInfoDrawerComponent extends InfoDrawerComponent {
+ tabIndex: number;
}
describe('Custom InfoDrawer', () => {
let fixture: ComponentFixture;
+ let component: CustomInfoDrawerComponent;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
InfoDrawerComponent,
+ InfoDrawerTabComponent,
InfoDrawerLayoutComponent,
CustomInfoDrawerComponent
],
@@ -100,6 +108,7 @@ describe('Custom InfoDrawer', () => {
beforeEach(() => {
fixture = TestBed.createComponent(CustomInfoDrawerComponent);
fixture.detectChanges();
+ component = fixture.componentInstance;
});
it('should render the title', () => {
@@ -108,4 +117,19 @@ describe('Custom InfoDrawer', () => {
expect(title.length).toBe(1);
expect(title[0].nativeElement.innerText).toBe('Fake Title Custom');
});
+
+ it('should select the tab 1 (index 0) as default', () => {
+ fixture.detectChanges();
+ let tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
+ expect(tab.length).toBe(1);
+ expect(tab[0].nativeElement.innerText).toBe('Tab1');
+ });
+
+ it('should select the tab 2 (index 1)', () => {
+ component.tabIndex = 1;
+ fixture.detectChanges();
+ let tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
+ expect(tab.length).toBe(1);
+ expect(tab[0].nativeElement.innerText).toBe('Tab2');
+ });
});
diff --git a/lib/core/info-drawer/info-drawer.component.ts b/lib/core/info-drawer/info-drawer.component.ts
index 4af5a8ab79..fa44ff6026 100644
--- a/lib/core/info-drawer/info-drawer.component.ts
+++ b/lib/core/info-drawer/info-drawer.component.ts
@@ -37,6 +37,9 @@ export class InfoDrawerComponent {
@Input()
title: string|null = null;
+ @Input()
+ selectedIndex: number = 0;
+
@Output()
currentTab: EventEmitter = new EventEmitter();