Navigate to another view

Ionic Framework ionic-v3
1

Hey,

​

trying to figure out how to push another view on the stack.

​

My home.ts code is:

​

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { About } from '../about/about';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

  constructor(public navCtrl: NavController) {
  }
  push() {
    this.navCtrl.push(about);
  }
}

and the home.html:

<ion-content padding>
    <nav class="nav-top"></nav>
    <div class="section-main">
        <button ion-button block (click)="push()">Push New Page</button>
    </div>
</ion-content>

I then have a about page (about.ts and about.html)

I tried to follow the docs, but i cant get this to work.

I am getting: “Runtime Error: _co.push is not function”

​

Anyone knows what i am doing wrong here? Kinda lost

2

You import About correctly into your component, the issue is what you pass to the navCtrl. It should not be about, but About.

3

That may be (or "About" if using lazy loading), but I can’t see how it would generate the posted error message. OP: are you sure there are no build errors that may be causing the running version of the app to be different from the source you’re posting? The error you describe can be paraphrased to mean “there is no method called push() in the controller belonging to this template”.

4

Thanks for the answer!

Tried to switch it to:

export class HomePage {

  constructor(public navCtrl: NavController) {
  }
  push() {
    this.navCtrl.push(About);
  }
}

But now i get “Uncaught (in promise): Invalid views to insert”

I am not getting any build errors in visual studio. So i am not sure what is happening.

5

Thanks for the reply!

Not getting any build errors, but i answered with the new error to Chris, not sure what that means. I might have some other code with mistakes, but no errors :S

6

My bad! solved it. I had it imported to app.module as AboutPage…

Thanks alot for the help!