CODEWITHSUNDEEP
angularionic-frameworkionic3
GonnaHack
GonnaHack

Reputation: 77

How to route form one page to another page in Ionic

Here I'm developing moving from one page to another page in IONIC. So that I developed below code

<div *ngFor="let list of product">
  <img [src] ='list.imge'/>
  <button ion-button round (click)="Contact()">view</button>
</div>

and typescript is 

export class HomePage {
 product:any[]=[{id:121,name:"iphone",imge:'assets/img/iphone.png'}]
  constructor(public navCtrl: NavController) {
  }
  Contact() {
    this.navCtrl.push('ContactPage');
  }
}

core.js:1449 ERROR Error: Uncaught (in promise): invalid link: ContactPage at c (polyfills.js:3)

Once I click on view button it is not moving to another page.

Edit contactpage type script

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

@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {

  constructor(public navCtrl: NavController) {

  }

}

Upvotes: 1

Views: 1152

Answers (3)

Abdul Rafay
Abdul Rafay

Reputation: 3391

in case it's lazy loaded:

import { NavController } from 'ionic-angular';
// IMPORT ContactPage IF NOT LAZY-LOADED
import { ContactPage} from path;

export class HomePage {
    constructor(private navCtrl:NavController){}

    // IF LAZY-LOADED
    Contact(){
        this.navCtrl.push('ContactPage');
    }

    // IF NOT LAZY-LOADED
    Contact(){
        this.navCtrl.push(ContactPage);
    }
}

Upvotes: 1

Arjun Ramdas
Arjun Ramdas

Reputation: 185

Your HTML

<div *ngFor="let list of product">
  <img [src] ='list.imge'/>
  <button ion-button round (click)="Contact()">view</button>
</div>

Modify your Typescript like this

import { ContactPage} from '../../pages/contact/contact';
.......

    export class HomePage {
     product:any[]=[{id:121,name:"iphone",imge:'assets/img/iphone.png'}]
      constructor(public navCtrl: NavController) {
      }

      Contact() {
        this.navCtrl.push(ContactPage);
        OR
        this.navCtrl.setRoot(ContactPage);//(if you want block backbutton)
      }
    }

Upvotes: 0

Pradnya Sinalkar
Pradnya Sinalkar

Reputation: 1146

Your ContactPage should contain module. Is that created using ionic page generate command?
Reference link: https://ionicframework.com/docs/cli/generate/

You can push a page for navigation using two ways.
1) Import page in page does not contain a module. And navigate like : 

import { ContactPage } from path;
this.navCtrl.push(ContactPage);

2) If a page has a module, navigate like:

this.navCtrl.push('ContactPage');

Upvotes: 0

Related Questions