ion-nav push method not working in Ionic 4

Question

<ion-nav> supports push as per the document here -- https://ionicframework.com/docs/api/nav

My currentPage html (current-page.page.html) has a button component -

<ion-button (click)="goToNextPage()">Next Page</ion-button>

My currentPage script file (current-page.page.ts) has following code -

import { Component, OnInit } from '@angular/core';
import { NavController, NavParams } from '@ionic/angular';
import { NextPage } from '../next-page/next-page.page';

@Component({
  selector: 'current-page',
  templateUrl: './current-page.page.html',
  styleUrls: ['./current-page.page.scss'],
})
export class CurrentPage implements OnInit {

  constructor(public navCtrl: NavController, public navParams: NavParams) { }

  goToNextPage () {
    this.navCtrl.push('NextPage');
  }

  ngOnInit() {
  }

}

However, I get the format error as Property 'push' does not exist on type 'NavController'

Not sure how to use the push method properly. Any help will be appreciated.

As described here: https://ionicframework.com/docs/navigation/angular, Ionic 4 recommands to use the Angular router instead of their own NavController. I think that it will be easier and cleaner to implement this instead of using the NavController. — Poney, Feb 05 '19 at 14:42
Nav component is useful for loading arbitrary components and pushing to new components on to the stack without affecting the app overall router (Ionic 4 document - https://ionicframework.com/docs/api/nav). For eg modal having its own sub navigation. I am using Angular router for my entire app. However, I have a slide in menu (split-pane) which has its own page stack. — user284748, Feb 05 '19 at 14:52

score 2 · Answer 1 · answered May 09 '19 at 22:09

So ion-nav is no longer used in the same capacity as in ionic 3.

The use case for it in Ionic 4 is for "... cases where you could have a modal, which needs it's own sub-navigation, but not make it tied to the apps URL".

The way you use it is:

add it to your template:

...
<ion-nav #ionNav></ion-nav> 
...

using ViewChild access it and its method in your ts file:

import { Component, ViewChild } from '@angular/core';
import { IonNav } from '@ionic/angular';
...
export class YourPage {

  @ViewChild('ionNav') ionNav:IonNav;
  ...

  ngAfterViewInit() {
    ... // after this hook and onwards you can call:
    this.ionNav.push("someComponent");
  }
}

Can you help me for this **https://stackoverflow.com/questions/56058968/how-to-route-within-the-tab-component-in-ionic** — Shankar, May 10 '19 at 04:28

score 0 · Answer 2 · answered Feb 06 '19 at 12:55

0

Maybe you can use this.navCtrl.navigateForward('NextPage');?

answered Feb 06 '19 at 12:55

Remi Sture

12,000
5
22
35

score 0 · Answer 3 · answered May 09 '19 at 16:47

0

Ionic 4, uses the angular routing,

This would work to navigate between pages

<ion-button color="primary" 
    routerLink="/nextPage" routerDirection="forward">Text Button</ion-button>

answered May 09 '19 at 16:47

Ivan Fretes

668
7
11

score 0 · Answer 4 · answered Jun 03 '20 at 08:02

In Ionic4 You can use either a ionic NavController or Angular router. If you want to use ionic NavController. You can write like this

import {
  NavController,
} from '@ionic/angular';

export class TrainerMessagesPage implements OnInit, OnDestroy {
  public _conversations: Conversation[] = [];
  public conversations: Conversation[] = [];
  private _amr: Subscription;
  public unreadOnly = false;

  constructor(
    private navCtrl: NavController,  ) {
  }

  public goToPage() {
    this.navCtrl.navigateForward(YOUR-Page-URL);
  }

}

ion-nav push method not working in Ionic 4

4 Answers4