Ionic2 – check if page is active

How can I check if a ionic2 page is active?

For example I want to hide a button if a page is active:

<button primary [hidden]="isActive('actualPageName')">
     Should be hidden
</button>

7
Leave a Reply

avatar
7 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

If you want to check for different Pages component this.navCtrl.last().instance instanceof MyPage; should be sufficient if you want to compare between two pages instance of the same component the only option i found was use a ref to the container and next use the getBoundingClientRect function because the width of not visible pages is 0 this maybe can help to someone.

this.content.nativeElement.getBoundingClientRect().width > 0

Jason
Guest

I track it, a little less elegant but effective and simpler:

ionViewWillEnter(){
    this.isActualView=true;
}

ionViewWillLeave(){
    this.isActualView=false;
}

...

if(this.isActualView)...//here I know I am in the actual view or not

Jason
Guest

IONIC 2 & 3:
Because of the uglification you cannot use pagename for production.

I check the active page by looking if the last page on the controller stack is of the instance of the page:

import { NavController } from 'ionic-angular';
import { myPage } from '../../pages/my/my';
...
constructor(public navCtrl: NavController) {}
...
let active = this.navCtrl.last().instance instanceof MyPage;

IONIC 4:
Routing is changed. This looks like the new way:

import { Router } from '@angular/router';
...
constructor(public router: Router) {}
...
let active =  this.router.isActive('mypage', false)

Jason
Guest

You can retrieve the active page and check its name: public isActive(pageName: string): boolean { return this.navCtrl.getActive().name === pageName); } UPDATE In the comments you can see some users that claim this solution is not working for them due to the Uglify process. It sounds reasonable, but I still found the solution seems to work. I’ve compiled an APK with this code using this command: ionic cordova build android --prod --release During compilation you can see: ... [13:00:41] uglifyjs started ... [13:00:43] sass finished in 2.45 s [13:00:43] cleancss started ... [13:00:46] cleancss finished in 3.05 s [13:00:57] uglifyjs finished… Read more »

Jason
Guest

Update to the @sanzante answers. You can retrieve an active page and check it’s name as follows.

public isActive(pageName: string): boolean {
   return this.navCtrl.getActive().id === pageName);
}

It will work for the –prod build version as well.

ionic cordova build android –prod –release

Jason
Guest

http://ionicframework.com/docs/v2/api/navigation/NavController/#isActive

Read the doc above. Import NavController to your Page, then you can inject NavController into your Page using typescript:

constructor(public nav: NavController) {}

or using ES6:

constructor(nav: NavController) {
    this.nav = nav;
}

After all that, you can call this.nav.getActive() to see the current Page or call this.nav.isActive('MyPage') to check if you are on MyPage

Edit: the ES6 version isn’t truly ES6 but should work for Ionic2

Jason
Guest

Old question but here are my 2 cents.

I believe a more cleaner solution would be to make use of the id property in the NavOptions, a draw back is that you need to pay attention to the id’s you assign to avoid an id collision:

You instantiate the component like this:

this.navCtrl.push(MyComponent, navParams, { id: 'my-component-1' });

Then you can simply check it like this:

this.navCtrl.getActive(true).id === 'my-component-1'