How to link a button to a page

Ionic Framework ionic-v3
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: