title: Changing the tab shown in an ionic 2 app via a function call
body: <p>I have a tab based ionic 2 typescript app.</p>
  
  <p>I want to change the default tab shown when the app is launched depending on whether or not the user is logged in.</p>
  
  <p>The code I am trying to use is giving me an error of <code>_this.tabRef is undefined</code> My app.ts file looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {Component, ViewChild} from '@angular/core';
  import {Platform, ionicBootstrap, NavController, Tabs} from 'ionic-angular';
  import {Http, Headers, RequestOptions, HTTP_PROVIDERS, XSRFStrategy, CookieXSRFStrategy} from '@angular/http';
  import {StatusBar} from 'ionic-native';
  import {HomePage} from './pages/home/home';
  import {LoginPage} from './pages/login/login';
  import {TabsPage} from './pages/tabs/tabs';
  import {DjangoAuth} from './providers/djangoAuth';
  import {API_ENDPOINT} from '../app_settings';
  import {AUTH_ENDPOINT} from '../app_settings';
  
  @Component({
    template: '&lt;ion-nav [root]="rootPage"&gt;&lt;/ion-nav&gt;'
  })
  export class MyApp {
    rootPage: any = HomePage;
  
    @ViewChild('twipTabs') tabRef: Tabs;
  
    constructor(public platform: Platform, public djangoAuth: DjangoAuth) {
  
      this.rootPage = TabsPage;
  
      platform.ready().then(() =&gt; {
  
        StatusBar.styleDefault();
  
        djangoAuth.initialize(AUTH_ENDPOINT, false);
  
        // Check if user is logged in
        djangoAuth.authenticationStatus()
          .then((data:any) =&gt; {
              alert('You are logged in');
              // Select the photo upload tab
              this.tabRef.select(2);
            },
            (err:any)=&gt;{
              alert('You are not logged in');
              // Select the login tab
              this.tabRef.select(1);
            });
      });
    }
  }
  
  ionicBootstrap(MyApp, [HTTP_PROVIDERS,
    DjangoAuth,
    Tabs,
    {provide:XSRFStrategy, useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken')}]);</code></pre>
  </div>
  </div>
  </p>
  
  <p>My tabs.html looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ion-tabs #twipTabs&gt;
    &lt;ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"&gt;&lt;/ion-tab&gt;
    &lt;ion-tab [root]="tab2Root" tabTitle="Login" tabIcon="information-circle"&gt;&lt;/ion-tab&gt;
    &lt;ion-tab [root]="tab3Root" tabTitle="Submit" tabIcon="contacts"&gt;&lt;/ion-tab&gt;
  &lt;/ion-tabs&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And my tabs.ts looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {Component, ViewChild, Injectable} from '@angular/core';
  import {Tabs} from 'ionic-angular';
  import {HomePage} from '../home/home';
  import {PhotoPage} from '../photo/photo';
  import {LoginPage} from '../login/login';
  import {ResetPasswordPage} from '../reset-password/reset-password';
  
  @Component({
    templateUrl: 'build/pages/tabs/tabs.html'
  })
  @Injectable()
  export class TabsPage {
  
    @ViewChild('twipTabs') tabRef: Tabs;
  
    private tab1Root: any;
    private tab2Root: any;
    private tab3Root: any;
  
    constructor() {
      this.tab1Root = HomePage;
      this.tab2Root = LoginPage;
      this.tab3Root = PhotoPage;
    }
  
  }</code></pre>
  </div>
  </div>
  </p>