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>