Fixed tabset index out of order (#1738)

src/modules/tabs/fixtures/tabset.component.fixture.ts

@@ -1,4 +1,10 @@
-import { Component } from '@angular/core';
+import {
+  Component,
+  ViewChild
+} from '@angular/core';
+import {
+  SkyTabsetComponent
+} from '..';
 
 @Component({
   selector: 'sky-test-cmp',
@@ -29,6 +35,9 @@ export class TabsetTestComponent {
 
   public tabMaxWidth = 2000;
 
+  @ViewChild(SkyTabsetComponent)
+  public tabsetComponent: SkyTabsetComponent;
+
   public newTab() { }
 
   public openTab() { }

src/modules/tabs/tab.component.ts

@@ -4,7 +4,6 @@ import {
   Input,
   OnDestroy,
   Output,
-  AfterViewInit,
   ChangeDetectorRef,
   OnChanges,
   SimpleChanges
@@ -16,7 +15,7 @@ import { SkyTabsetService } from './tabset.service';
   selector: 'sky-tab',
   templateUrl: './tab.component.html'
 })
-export class SkyTabComponent implements OnDestroy, AfterViewInit, OnChanges {
+export class SkyTabComponent implements OnDestroy, OnChanges {
   @Input()
   public tabHeading: string;
 
@@ -41,7 +40,7 @@ export class SkyTabComponent implements OnDestroy, AfterViewInit, OnChanges {
 
   constructor(private tabsetService: SkyTabsetService, private ref: ChangeDetectorRef) {}
 
-  public ngAfterViewInit() {
+  public initializeTabIndex() {
     setTimeout(() => {
       this.tabsetService.addTab(this);
 
@@ -69,9 +68,13 @@ export class SkyTabComponent implements OnDestroy, AfterViewInit, OnChanges {
         this.tabsetService.activateTab(this);
       }
     }
+
   }
 
   public ngOnDestroy() {
+
     this.tabsetService.destroyTab(this);
+
   }
+
 }

src/modules/tabs/tabset.component.spec.ts

@@ -71,6 +71,17 @@ describe('Tabset component', () => {
     }
   }
 
+  it('should initialize tabs in proper order', fakeAsync(() => {
+    let fixture = TestBed.createComponent(TabsetTestComponent);
+    fixture.detectChanges();
+    tick();
+    let tabsetService: SkyTabsetService = (fixture.componentInstance.tabsetComponent as any).tabsetService;
+
+    fixture.componentInstance.tabsetComponent.tabs.forEach((item, index) => {
+      expect(item).toBe(tabsetService.tabs.getValue()[index]);
+    });
+  }));
+
   describe('tabs with active attribute', () => {
     it('should change the active tab when tab active is set to true', fakeAsync(() => {
       let fixture = TestBed.createComponent(TabsetTestComponent);

src/modules/tabs/tabset.component.ts

@@ -85,6 +85,9 @@ export class SkyTabsetComponent
   }
 
   public ngAfterContentInit() {
+    // initialize each tab's index. (in case tabs are instantiated out of order)
+    this.tabs.forEach(item => item.initializeTabIndex());
+
     if (this.active || this.active === 0) {
       this.tabsetService.activateTabIndex(this.active);
     }