Ionic Framework 2 offers built-in menu user interface. You can create a sample project with menu using

ionic start menu_project sidemenu --v2

This tutorial explains, how to add the active class (current menu marked with color)  to the current page. This code uses the same above project with some modification.

The scenario is, whenever the user clicks the menu, the current page menu marked with some color and rest of the menu page will be marked as the default color. Look at the below image for better understanding.


You can find the below code in the app.component.ts file

pages: Array<{title: string, component: any}>;

Add new variable to this array using

pages: Array<{title: string, component: any,color:any}>;

Then add color variable with values

this.pages = [
      { title: 'Page One', component: Page1, color:'light' },
      { title: 'Page Two', component: Page2, color:'light'}
    ];

Then add color to the button in the app.html using

<button menuClose color="{{p.color}}" 
ion-item 
*ngFor="let p of pages" 
(click)="openPage(p)">
        
{{p.title}}

      </button>

Now it will take the light color of ionic 2 framework. When the user clicks the menu, the openPage() function will be called. Modify the openPage() function using

  openPage(page) {
 
    this.nav.setRoot(page.component);
    page.color='danger';

    for (let p of this.pages) {
    
    if(p.title==page.title)
    {
      p.color='danger';
    }
    else
    {
      p.color='light';
    }
    
    }
 
  }

The above code checks the current page title and changes the current page color to red( danger component in ionic) and rest of the page will be marked as the light color.That's all.