How to link a button to a page


#1

How do I link a button to a page?
Like clicking a login button that redirects to the home page


#2

Create a Button in HTML and add a function in Typescript.

HTML

<button ion-button (click)="YourFancyButton()">Button</button>

TS

First you have to import your page.

import { YOURPAGE } '../pages/yourpage/yourpage';

also don’t forget to add this to your constructor.

public navController: NavController

now we will add the direct function to the button.

YourFancyButton(){
this.navController.setRoot(YOURPAGE);
}

What you can also do is to use navPush and navPop what i actually prefer todo.
Here is a doc for it.

Basicly what it does it pushes you to another page and creates a backbutton for you.

HTML (note that we do not use ‘()’ after ‘YourFancyButton’)

<button ion-button [navPush]="YourFancyButton">Button</button>

TS

import { YOURPAGE } '../pages/yourpage/yourpage';

add this to your export class

export class YourPageName {
YourFancyButton: any;

constructor(){
this.YourFancyButton = YOURPAGE;
}

If you want to get a backbutton just do it like that it will ‘pop’ the page and throws you back to your page wich pushed you.

<button ion-button navPop>Button</button>

I hope this helped you. Happy coding! :penguin:


How to connect pages in ionic app?
#3

this doesn’t work. beginning with the fact you need “from” on your import statement.


#4

Thanks for pointing that out! Sadly I can’t edit anymore so I will do it here:

Don’t forget “from” in your import! Since I forgot to add it above.

Do as followed:

import { YOURPAGE } from '../pages/yourpage/yourpage';