feat(tabs): refactoring tabs selection #5471

Author: rmkrmk

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

@@ -531,11 +531,13 @@ describe('IgxTabs', () => {
     });
 
     describe('Tabs-only Mode With Initial Selection Set on TabItems Tests', () => {
+        let router;
         let fixture;
         let tabsComp;
         let theTabs;
 
         beforeEach(async(() => {
+            router = TestBed.get(Router);
             fixture = TestBed.createComponent(TabsTabsOnlyModeTest1Component);
             tabsComp = fixture.componentInstance.tabs;
             fixture.detectChanges();
@@ -576,6 +578,17 @@ describe('IgxTabs', () => {
             expect(theTabs[2].nativeTabItem.nativeElement.classList.contains(tabItemSelectedCssClass)).toBe(true);
         });
 
+        it('should clear the selection indicator when not tab item is selected', fakeAsync(() => {
+            fixture.ngZone.run(() => { router.initialNavigation(); });
+            tick();
+            expect(tabsComp.selectedIndicator.nativeElement.style.visibility).toBe('visible');
+
+            fixture.ngZone.run(() => { router.navigate(['/']); });
+            tick();
+            fixture.detectChanges();
+            expect(tabsComp.selectedIndicator.nativeElement.style.visibility).toBe('hidden');
+        }));
+
     });
 
     describe('Tabs-only Mode With Initial Selection Set on Tabs Component Tests', () => {

src/app/tabs-routing/tabs-routing.sample.html

@@ -7,6 +7,11 @@
         <div class="items-wrapper__item">
 
             <h3 class="sample-title">Routing sample</h3>
+
+            <button (click)="clickHandler0()">to Root</button>
+            <button (click)="clickHandler1()">to View1</button>
+            <button (click)="clickHandler2()">to View2</button>
+            <button (click)="clickHandler3()">to View3</button><br><br>
 
             <igx-tabs>
                 <igx-tab-item label="Tab 1" icon="folder"

src/app/tabs-routing/tabs-routing.sample.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
     selector: 'app-tabs-routing-sample',
@@ -7,6 +8,9 @@ import { Component } from '@angular/core';
 })
 export class TabsRoutingSampleComponent {
 
+    constructor(private router: Router) {
+    }
+
     contacts: any[] = [{
         avatar: 'assets/images/avatar/1.jpg',
         favorite: true,
@@ -37,5 +41,21 @@ export class TabsRoutingSampleComponent {
         text: 'Lisa Landers'
     }];
 
+    public clickHandler0() {
+        this.router.navigateByUrl('/tabs-routing');
+    }
+
+    public clickHandler1() {
+        this.router.navigateByUrl('/tabs-routing/view1');
+    }
+
+    public clickHandler2() {
+        this.router.navigateByUrl('/tabs-routing/view2');
+    }
+
+    public clickHandler3() {
+        this.router.navigateByUrl('/tabs-routing/view3');
+    }
+
 }