I am new to ionic framework. I am trying to redirect to other page on button click in ionic framework version 3. I did not get enough source on this. I tried location() and go() functions but it did not work.

This is my code in newpage.html :

<button ion-button block (click)="click()">Click me</button>

This is my code in newpage.ts :

  click() {
  this.go('/HomePage');
  }

I am new to ionic framework. I am trying to redirect to other page on button click in ionic framework version 3. I did not get enough source on this. I tried location() and go() functions but it did not work.

This is my code in newpage.html :

<button ion-button block (click)="click()">Click me</button>

This is my code in newpage.ts :

  click() {
  this.go('/HomePage');
  }

• javascript
• ionic-framework
• ionic3

• 1 May I ask, why don't you read the navigation-related docs in the first place? – sebaferreras Commented Jul 18, 2017 at 7:50
• Sorry i was keen on looking for button click. Did not think there could be a way to redirect from nav on button click – Varuni N R Commented Jul 18, 2017 at 7:51
• 1 Np, just mentioned that because navigation in Ionic is not as simple as it may look, so you'd definitely need to read the docs to avoid some bugs/issues. There are a lot of things to consider for your question, like is that the root ponent?, do you want to set that page as root, or just push it?, and so on... – sebaferreras Commented Jul 18, 2017 at 7:53
• 1 Okay thank u for the suggestion – Varuni N R Commented Jul 18, 2017 at 7:54
• 1 @sebaferreras - Hey found answer for setting as root ponent and just pushing it. Anyway thanks – Varuni N R Commented Jul 18, 2017 at 8:05

1 Answer 1

Use the [NavController][1] from ionic-angular. Its push()-method pushes a new view onto the navigation stack. This means that you can use the NavController pop()-method to go back to this page.

import { NavController } from 'ionic-angular';
// IMPORT HOMEPAGE IF NOT LAZY-LOADED
import { HomePage } from '../home/home';

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

    // IF LAZY-LOADED
    click(){
        this.navCtrl.push('HomePage');
    }

    // IF NOT LAZY-LOADED
    click(){
        this.navCtrl.push(HomePage);
    }
}

According to the docs: "If the page has an <ion-navbar>, a back button will automatically be added to the pushed view."