Link between pages

Ionic Framework ionic-v3
#1

im starting an app using ionic2 with Visual studio 2017.
i cant set a link from a ion-card to other page.

i have one page called “productos”. this page has a ion-card inside. i want to put a link from this ion-card to other page.

this is productos.ts code:

import { Page2 } from ‘page2/page2’;
import { Component } from ‘@angular/core’;
import { App, NavController, NavParams } from ‘ionic-angular’;
import { Prints } from ‘…/pages/prints/prints’;

@Component({
selector: ‘page-productos’,
templateUrl: ‘productos.html’
})

export class Productos {
constructor(public navCtrl: NavController, public navParams: NavParams, public app: App) {

}
public OpenListing(pagina) {
    this.navCtrl.setRoot(pagina);
}

}

and this is the productos.html card

ion-card (click)=“OpenListing(‘Page2’)” tappable>

i was searching in google and follow examples but i cant fix it.
¿where is the problem?

thank you so much.

#2

Can you update your formatting so your post is readable?

Secondly, seems like you are trying to push the string ‘Page2’ onto the nav stack instead of the actual component Page2. Hard to know for sure though since it’s all formatted wrong.

#3

SetRoot will clear all the previous pages on the stack and put the page you specified as the rootPage. Why dont you just juse navigate.push()?

Regarding to linking the page, you have to import the page page2 into productos page before using it. Then use that class name in the push method. It is not possible to do that from your template directly.

Ashley

#4

thanks for your reply.
the question is formated now.

i understand your reply but i tried using the name of the import Page2 and has the same result.

#5

thanks for your reply

i have this imports into productos.ts at the top
import { Page2 } from ‘page2/page2’;
import { Component } from ‘@angular/core’;
import { App, NavController, NavParams } from ‘ionic-angular’;
import { Prints } from ‘…/pages/prints/prints’;

#6

im stucked with this…

#7

You want a tappable card, which, when tapped, takes the user to another page that includes the info on the card?

Wrap the ion-card in a div. In the opening div, do:

<div (click)="cardSelected(variableWithCardInformation)">

The in cardSelected(card: CardType) use navParams to push the card variable to your new page. Don’t make the ion-card directly clickable. That leads to unpredictable behavior. Not documented as far as I know, but it’s a real thing. (IE don’t do <ion-card (click)=""> )

1 Like
#8

Thanks again!
i will try your fix.

#9

No, i’m getting same result. now is not possible run the app…

here is the code of productos.ts
import { Page2 } from ‘page2/page2’;
import { Component } from ‘@angular/core’;
import { App, NavController, NavParams } from ‘ionic-angular’;
import { Prints } from ‘…/pages/prints/prints’;

@Component({
selector: ‘page-productos’,
templateUrl: ‘productos.html’
})

export class Productos {

constructor(public navCtrl: NavController, public navParams: NavParams, public app: App) {
   
}
public OpenListing() {
    this.navCtrl.push(Page2);
}

}

the problem is in this line this.navCtrl.push(Page2); if i use Page2 the app don’t run

#10

Pass the parameter to page2 in your push statement, and then read it in page 2 using NavParams.get().

#11

i don’t need to pass any parameter to page2. i’m in a page called productos.html and i just want to go to page2.html ( i got productos.html from sidemenu)
if i use this line this.navCtrl.push(Page2); i can’t compile app because Page2 seems doesn’t exists
sorry if a not so clear… im doing my best but my english is not so good

#12

Is it possible that Page2 is not properly declared in a module?

1 Like
#13

i think it’s declared.

im using a fresh start. now im trying with a new project. i just create a new project using sidemenu template.
this template has two pages. page 1 and page 2…
i just want to put a link from page 1 to page 2 and i cant!!
i’m getting crazy. i dont know what to do…

#14

Well, finally it’s solved!
the problem was the import route… just this!
incredible.

thank a lot to everyone!