CODEWITHSUNDEEP
ionic2
amyst
amyst

Reputation: 616

How to get current page from Navigation in ionic 2

I am new to Ionic2, and I am trying to build dynamic tabs based on current menu selection. I am just wondering how can I get current page using navigation controller. 

...
export class TabsPage {
  constructor(navParams: NavParams,navCtrl:NavController) {
    //here I want to get current page
 }
}
...

From api documentation I feel getActiveChildNav() or getActive() will give me the current page, but I have no knowledge on ViewController/Nav.

Any help will be appreciated. Thanks in advance.

Upvotes: 16

Views: 34111

Answers (9)

vignesh
vignesh

Reputation: 56

This router.url is available from angular version 4+ to track current page from navigation and also can use for ionic/angular based projects

import { Router} from '@angular/router';

constructor(public router: Router){
console.log(router.url);
}

Upvotes: 0

Code Spy
Code Spy

Reputation: 9964

Instead of 

...
...

//In debug mode alert value is 'HomePage'
//In production/ signed apk alert value is 'n'

alert(activeView.component.name);
if (activeView.component.name === 'HomePage') {
...
...

Use this

...
...

//In debug mode alert value is 'HomePage'
//In production/ signed apk alert value is 'HomePage'

alert(activeView.id);
if (activeView.id === 'HomePage') {
...
...

Source Link

Upvotes: 0

malwatte
malwatte

Reputation: 477

Old post. But this is how I get current page name both in dev and prod

this.appCtrl.getActiveNav().getActive().id

Upvotes: 0

Cel
Cel

Reputation: 6659

navCtrl.getActive() seems to be buggy in certain circumstances, because it returns the wrong ViewController if .setRoot was just used or if .pop was just used, whereas navCtrl.getActive() seems to return the correct ViewController if .push was used.

Use the viewController emitted by the viewDidEnter Observable instead of using navCtrl.getActive() to get the correct active ViewController, like so:

navCtrl.viewDidEnter.subscribe(item=> {
          const viewController = item as ViewController;
          const n = viewController.name;
          console.log('active page: ' + n);
      });

I have tested this inside the viewDidEnter subscription, don't know about other lifecycle events ..

Upvotes: 0

Ahmet Mehmet
Ahmet Mehmet

Reputation: 288

this.navCtrl.getActive().name != TheComponent.name or this.navCtrl.getActive().component !== TheComponent

is also possible

Upvotes: 0

Cleber Albuquerque
Cleber Albuquerque

Reputation: 91

My team had to build a separate custom shared menu bar, that would be shared and displayed with most pages. From inside of this menu component.ts calling this.navCtrl.getActive().name returns the previous page name. We were able to get the current page name in this case using:

ngAfterViewInit() {
 let currentPage = this.app.getActiveNav().getViews()[0].name;
 console.log('current page is: ', currentPage);
}

Upvotes: 2

Aditya Kumar
Aditya Kumar

Reputation: 151

OMG! This Really Helped mate, Tons of Thanks! @Deivide I have been stuck for 1 Month, Your answer saved me. :) Thanks!

if(navCtrl.getActive().component === DashboardPage){
    this.showAlert();
}
else
{
    this.navCtrl.pop();    
}

Upvotes: 7

Rafael Motta
Rafael Motta

Reputation: 2537

Full example:

import { NavController } from 'ionic-angular';

export class Page {

  constructor(public navCtrl:NavController) {
  }

  (...)

  getActivePage(): string {
    return this.navCtrl.getActive().name;
  }
}

Method to get current page name:

this.navCtrl.getActive().name

More details here

Upvotes: 34

Adam Szmyd
Adam Szmyd

Reputation: 2973

You can use getActive to get active ViewController. The ViewController has component and its the instance of current view. The issue is the comparsion method. I've came up to solution with settings some field like id:string for all my Page components and then compare them. Unfortunately simple checking function name so getActive().component.name will break after minification.

Upvotes: -1

Related Questions