title: Ionic & Angular App with Tabs and SideMenu
body: <p>I started my first Ionic app with the Tabs template, and I want to add a navbar side menu  that will work on all 6 tabbed pages. </p>
  
  <p>I've spent hours going through a few problems but the problem that I'm having is that it can not find the StatusBar or SplashScreen plug-ins. </p>
  
  <p>I tried a few different methods to get the side menu, but the one I am currently trying has gotten me the furthest. Appreciate any alternative methods as well.</p>
  
  <p><strong>app.components.ts</strong></p>
  
  <pre><code>import { Component, ViewChild } from '@angular/core';
  import { Nav, Platform } from 'ionic-angular';
  import { StatusBar } from '@ionic-native/status-bar';
  import { SplashScreen } from '@ionic-native/splash-screen';
  
  import {NewsfeedService} from './services/newsfeed.service'
  
  import { NewsPage } from '../pages/news/news';
  import { PlayersPage } from '../pages/players/players';
  import { TeamsPage } from '../pages/teams/teams';
  
  import { TabsPage} from '../pages/tabs/tabs'
  
  @Component({
    templateUrl: 'app.html',
    providers: [NewsfeedService]
  })
  export class MyApp {
    @ViewChild(Nav) nav: Nav;
  
    rootPage:any = TabsPage;
    pages: Array&lt;{title: string, component: any}&gt;;
  
    constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
      this.initializeApp();
  
      // used for an example of ngFor and navigation
      this.pages = [
        { title: 'Homepage', component: NewsPage },
        { title: 'Team Research', component: TeamsPage },
        { title: 'Player Research', component: PlayersPage }
      ];
  
    }
    openPage(page) {
      // Reset the content nav to have just this page
      // we wouldn't want the back button to show in this scenario
      this.nav.setRoot(page.component);
    }
  
    initializeApp() {
      this.platform.ready().then(() =&gt; {
        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
  
      });
    }
    }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;ion-menu [content]="content"&gt;
      &lt;ion-toolbar&gt;
          &lt;ion-title&gt;Menu&lt;/ion-title&gt;
      &lt;/ion-toolbar&gt;
      &lt;ion-content&gt;
          &lt;ion-list&gt;
              &lt;button ion-item *ngFor="let p of pages" (click)="openPage(p)"&gt;
                  {{p.title}}
              &lt;/button&gt;
          &lt;/ion-list&gt;&gt;
      &lt;/ion-content&gt;
  &lt;/ion-menu&gt;
  &lt;ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"&gt;&lt;/ion-nav&gt;
  </code></pre>