Get the Active Tab Index in a TabView

Get the index of the current selected tab for use outside the TabView. A partner snack by Steve P and Nathan Walker

  •         
import {Component} from "@angular/core";

@Component({
 selector: "Tab-Snack",
 templateUrl: "./Pages/TabSnack/TabSnack.html"
})
export class TabSnack {
 public activeTab: string;

 public tabIndexChanged(e: any) {
   switch (e.newIndex) {
     case 0:
       console.log(`Selected tab index: ${e.newIndex}`);
       this.activeTab = "TabOne";
       break;
     case 1:
       console.log(`Selected tab index: ${e.newIndex}`);
       this.activeTab = "TabTwo";
       break;
     case 2:
       console.log(`Selected tab index: ${e.newIndex}`);
       this.activeTab = "TabThree";
       break;
     default:
       break;
   }
 }

}
	
		
  
  •         
<ActionBar>
 
 <ActionItem>
   <ActionView>
     <Label text="NG Active Tab Demo"></Label>
   </ActionView>
 </ActionItem>
 
 
 <ActionItem *ngIf="activeTab == 'TabOne'">
   <Label row="0" col="2" text="Tab One" width="80"></Label>
 </ActionItem>
 <ActionItem *ngIf="activeTab == 'TabTwo'">
   <Label row="0" col="2" text="Tab Two" width="80"></Label>
 </ActionItem>
 <ActionItem *ngIf="activeTab == 'TabThree'">
   <Label row="0" col="2" text="Tab Three" width="80"></Label>
 </ActionItem>
 
</ActionBar>

<TabView #tabview (selectedIndexChanged)="tabIndexChanged($event)">

 <StackLayout *tabItem="{title: 'Tab1'}">
   <Label text="This is Label in Tab 1"></Label>
 </StackLayout>
 <StackLayout *tabItem="{title: 'Tab2'}">
   <Label text="This is Label in Tab 2"></Label>
 </StackLayout>
 <StackLayout *tabItem="{title: 'Tab3'}">
   <Label text="This is Label in Tab 3"></Label>
 </StackLayout>
 
</TabView>