title: Changing tabs dynamically in Ionic 2
body: <p>I am creating an Ionic application where I am using tabs. I want to be able to navigate from one tab to the other using the typescript component class attached to the tab template. For example, Tab 2 should be activated upon triggering an event in tab 1.</p>
  
  <p>My tab loads well in the tabs and all is well as long as I manually click on the tab to move around, but trying to switch context in the code behind as been very tricky.</p>
  
  <p>At load time I am able to make any one of the tabs active by simply setting the [selectedIndex] attribute of the ion-tabs to the value of an attribute in my tabs component class.</p>
  
  <p><strong>Tabs Parent Template - tab.html</strong></p>
  
  <pre><code>&lt;ion-tabs #tabParent [selectedIndex]="tabToShow"&gt;
    &lt;ion-tab tabTitle="Tab 1" [root]="tab2" [rootParams]="{parent : tabParent}"&gt;&lt;/ion-tab&gt;
    &lt;ion-tab tabTitle="Tab 2" [root]="tab2" [rootParams]="{parent : tabParent}&gt;&lt;/ion-tab&gt;
    &lt;ion-tab tabTitle="Tab 3" [root]="tab3" [rootParams]="{parent : tabParent}&gt;&lt;/ion-tab&gt;
  &lt;/ion-tabs&gt;
  </code></pre>
  
  <p><strong>Component - tab.ts</strong></p>
  
  <pre><code>import {Page} from 'ionic-angular';
  import {Tab1} from '../tab1/tab1.ts';
  import {Tab2} from '../tab2/tab2.ts';
  import {Tab3} from '../tab3/tab3.ts';
  
  @Page({
  templateUrl : 'build/pages/tab/tab.html'
  })
  
  export class Tab{
  
  tab1: any;
  tab2: any;
  tab3: any;
  
  tabToShow : number = 1;
  
  ngOnInit(){
   this.tab1 = Tab1;
   this.tab2 = Tab2;
   this.tab3 = Tab3;
   }
  
  }
  </code></pre>
  
  <p>In the component for the first tab (<code>Tab1</code>), i am able to get a reference to the parent tabs by using <code>[rootParams] = "{parent : tabParent}"</code> and I am able access all available properties exposed by the tabs object. An event generated on the tab1.html template, causes the <code>goToTab2()</code> to be called. So, I was able to set <code>SelectedIndex</code> to 1 (which I expect to change the active tab to the second tab). But the tab is not changing.</p>
  
  <p><strong>tab1.ts</strong></p>
  
  <pre><code>import {Page, NavParams} from 'ionic-angular';
  import {Tab2} from '../tab/tab2/tab2.ts'
  
  @Page({
   templateUrl : 'build/pages/tab/tab1/tab1.html'
  })
  
  export class Tab1{
  
  parent : any;
  
  constructor(nav : NavParams){
  this.parent = nav.data;
  }
  
  goToTab2(event, value): void{
   this.parent.parent.selectedIndex = 1;
   console.log(this.parent.parent);
   }
  
  }
  </code></pre>
  
  <p>I need help, what am I doing wrong?</p>