Ionic2 - check if the page is active

Question

How to check if ionic2 page is active?

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

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

Answer 1

IONIC 2 & 3: Because of this, you cannot use pagename for production.

I check the active page to see if the last page on the controller stack is an 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 changed. It looks new:

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

Answer 2

You can get 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 who claim that this solution does not work for them because of the Uglify process. That sounds reasonable, but I still found a solution that seems to work. I compiled an APK with this code using the following command:

 ionic cordova build android --prod --release 

At compile time, 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 in 16.27 s ... 

Then, when I launched this application in the Android emulator, I got the name of the right page using this.navCtrl.getActive().name .

I must say that I did not test it with a signed application on a real device.

Maybe Android or the emulator will not be affected, maybe the problem described by these users has been resolved in recent releases, maybe I'm doing something wrong. Since I do not know the answer to these questions, I keep my answer, but I added this information. Please, if you know more about this comment, instead of just ignoring or postponing the answer. If this answer turns out to be erroneous, I will gladly change it or delete it.

Answer 3

Update @sanzante answers. You can get the active page and check its name as follows.

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

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

ion cordova builds android --prod --release

Answer 4

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

Read the document above. Import the NavController into your page, then you can enter the NavController into your page using typescript:

 constructor(public nav: NavController) {} 

or using ES6:

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

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

Edit: ES6 version is not really ES6, but should work for Ionic2

Answer 5

Old question, but here are my 2 cents.

I believe that a cleaner solution would be to use the id property in NavOptions. The disadvantage is that you need to pay attention to the identifier you have assigned to avoid identifier conflicts:

You create an instance of the component as follows:

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

Then you can simply check it as follows:

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

Answer 6

If you want to check for another component of Pages, this.navCtrl.last (). Instance instanceof MyPage; should be enough if you want to compare between two pages of an instance of the same component, the only option found is to use the container link and then use the getBoundingClientRect function, because the width of the invisible pages is 0, this may help someone.

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

Answer 7

I keep track of this, a little less elegantly, but efficiently and simply:

 ionViewWillEnter(){ this.isActualView=true; } ionViewWillLeave(){ this.isActualView=false; } ... if(this.isActualView)...//here I know I am in the actual view or not