feat(tabs/bottomNav): addressing issues #4297

Author: rmkrmk

projects/igniteui-angular/src/lib/tabbar/tabbar.component.spec.ts

@@ -199,26 +199,28 @@ describe('TabBar', () => {
         tick();
         expect(location.path()).toBe('/');
 
+        const theTabs = bottomNav.contentTabs.toArray();
+
         fixture.ngZone.run(() => { router.navigate(['/view3']); });
         tick();
         expect(location.path()).toBe('/view3');
         fixture.detectChanges();
         expect(bottomNav.selectedIndex).toBe(2);
-        expect(bottomNav.contentTabs.toArray()[2].isSelected).toBe(true);
+        expect(theTabs[2].isSelected).toBe(true);
 
         fixture.ngZone.run(() => { router.navigate(['/view2']); });
         tick();
         expect(location.path()).toBe('/view2');
         fixture.detectChanges();
         expect(bottomNav.selectedIndex).toBe(1);
-        expect(bottomNav.contentTabs.toArray()[1].isSelected).toBe(true);
+        expect(theTabs[1].isSelected).toBe(true);
 
         fixture.ngZone.run(() => { router.navigate(['/view1']); });
         tick();
         expect(location.path()).toBe('/view1');
         fixture.detectChanges();
         expect(bottomNav.selectedIndex).toBe(0);
-        expect(bottomNav.contentTabs.toArray()[0].isSelected).toBe(true);
+        expect(theTabs[0].isSelected).toBe(true);
     }));
 });
 

projects/igniteui-angular/src/lib/tabbar/tabbar.component.ts

@@ -168,7 +168,7 @@ export class IgxBottomNavComponent implements AfterViewInit {
      *@hidden
      */
     public get hasContentTabs(): boolean {
-        return (this.contentTabs && this.contentTabs.toArray().length > 0);
+        return (this.contentTabs && this.contentTabs.length > 0);
     }
 
     /**
@@ -583,13 +583,9 @@ export class IgxTabComponent {
      * @memberof IgxTabComponent
      */
     public get index(): number {
-        if (this._tabBar && this._tabBar.hasContentTabs) {
-            return this._tabBar.contentTabs.toArray().indexOf(this);
-        }
-        if (this._tabBar && this._tabBar.tabs) {
+        if (this._tabBar.tabs) {
             return this._tabBar.tabs.toArray().indexOf(this);
         }
-        return 0;
     }
 
     /**@hidden*/

projects/igniteui-angular/src/lib/tabs/tab-item.component.ts

@@ -266,9 +266,6 @@ export class IgxTabItemComponent implements IgxTabItemBase {
      * @hidden
      */
     public get context(): any {
-        if (this.relatedGroup) {
-            return this.relatedGroup;
-        }
-        return this;
+        return this.relatedGroup ? this.relatedGroup : this;
     }
 }

projects/igniteui-angular/src/lib/tabs/tabs.component.spec.ts

@@ -450,26 +450,28 @@ describe('IgxTabs', () => {
         tick();
         expect(location.path()).toBe('/');
 
+        const theTabs = tabsComp.contentTabs.toArray();
+
         fixture.ngZone.run(() => { router.navigate(['/view3']); });
         tick();
         expect(location.path()).toBe('/view3');
         fixture.detectChanges();
         expect(tabsComp.selectedIndex).toBe(2);
-        expect(tabsComp.contentTabs.toArray()[2].isSelected).toBe(true);
+        expect(theTabs[2].isSelected).toBe(true);
 
         fixture.ngZone.run(() => { router.navigate(['/view2']); });
         tick();
         expect(location.path()).toBe('/view2');
         fixture.detectChanges();
         expect(tabsComp.selectedIndex).toBe(1);
-        expect(tabsComp.contentTabs.toArray()[1].isSelected).toBe(true);
+        expect(theTabs[1].isSelected).toBe(true);
 
         fixture.ngZone.run(() => { router.navigate(['/view1']); });
         tick();
         expect(location.path()).toBe('/view1');
         fixture.detectChanges();
         expect(tabsComp.selectedIndex).toBe(0);
-        expect(tabsComp.contentTabs.toArray()[0].isSelected).toBe(true);
+        expect(theTabs[0].isSelected).toBe(true);
     }));
 });
 

projects/igniteui-angular/src/lib/tabs/tabs.component.ts

@@ -188,7 +188,7 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy {
      *@hidden
      */
     public get hasContentTabs(): boolean {
-        return (this.contentTabs && this.contentTabs.toArray().length > 0);
+        return (this.contentTabs && this.contentTabs.length > 0);
     }
 
     /**
@@ -207,7 +207,7 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy {
     public offset = 0;
 
     private _groupChanges$: Subscription;
-    private _selectedIndex = -1;
+    private _selectedIndex = 0;
 
     /**
      * @hidden
@@ -311,6 +311,11 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy {
      * @hidden
      */
     public ngAfterViewInit() {
+        if (this.hasContentTabs) {
+            // in content tabs mode there there is not first tab selected by default
+            this._selectedIndex = -1;
+        }
+
         requestAnimationFrame(() => {
             this.setSelectedGroup();
         });