title: Ionic - Menu Active State not changing on click
body: <p><a href="https://i.stack.imgur.com/aOiaU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aOiaU.png" alt="enter image description here"></a></p>
  
  <p>I am using a Ionic Side-Menu application. 
  The above image highlights my issue. I would like the menu active state to be changed when I navigate to that particular page.
  The menu state works fine when clicking the menu item to navigate and not anywhere else to navigate.</p>
  
  <p>On clicking "Go To List" from Home, I am using the following code in my HomePage.</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 } from '@angular/core';
  import { NavController } from 'ionic-angular';
  import { ListPage } from '../list/list';
  
  @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
  })
  export class HomePage {
  
    listPage =  ListPage; 
    constructor(public navCtrl: NavController) {
  
    }
  
    goToList(){
      this.navCtrl.setRoot(this.listPage);
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>app.component.ts</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 { Nav, Platform } from 'ionic-angular';
  import { StatusBar } from '@ionic-native/status-bar';
  import { SplashScreen } from '@ionic-native/splash-screen';
  
  import { HomePage } from '../pages/home/home';
  import { ListPage } from '../pages/list/list';
  import { GalleryPage } from '../pages/gallery/gallery';
  
  @Component({
    templateUrl: 'app.html'
  })
  export class MyApp {
    @ViewChild(Nav) nav: Nav;
  
    rootPage: any = HomePage;
    activePage: any;
  
    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: 'Home', component: HomePage },
        { title: 'List', component: ListPage },
        { title: 'Gallery', component: GalleryPage}
      ];
  
      this.activePage = this.pages[0];
  
    }
  
    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.
        this.statusBar.styleDefault();
        this.splashScreen.hide();
      });
    }
  
    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);
      this.activePage = page;
    }
  
    checkActive(page){
      return page === this.activePage;
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help on this?</p>