How to link a button to a page


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


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


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


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.


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>


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

add this to your export class

export class YourPageName {
YourFancyButton: any;

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?

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


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';