how to go to another page with a button click with

Question

I have been trying to work with the code, I added the button but I don't know how to link it to another page when clicking on it.

Answer 1

html:

 <ion-buttons>
   <button ion-button (click)="goAnOtherPage()">Go an Other Page </button>
 </ion-buttons>

OR

 <ion-label  [navPush]="anOtherPage">Go an Other Page</ion-label>

in TS:

import { NavController } from 'ionic-angular';
import { AnOtherPage } from '/anOtherPage';


anOtherPage: AnOtherPage;

 constructor(public navCtrl: NavController) {}

goAnOtherPage() {
  this.navCtrl.setRoot(anOtherPage);
}

Answer 2

you can also use angular to do this for you:

<button ng-click="doSomething(withSomebody)"> Submit
</button>

You would need to have a controller to and define doSomething()

$scope.doSomething=function(somebody){
    ...insert code here
}

If you needed to change your state, the inject $state into your controller and use $state.go(stateName)

ref: https://github.com/angular-ui/ui-router/wiki

Answer 3

This is what i used

 <ion-nav-buttons side="right" >
        <a href="templates/yourpage.html">
        <button class="button">
            Show your page
        </button>
        </a>
    </ion-nav-buttons>

Answer 4

Navigation works differently in ionic and it is not advised to simply use an anchor tag and the path to the file.

Here is an example which works. In the relevant TS file import the page(s) you want to navigate to like so

import { OtherPage} from "../pagefolder/pagecontroler";
import { YetAnotherPage} from "../pagefolder/pagecontroler";

Ensure that you have the navigation controller imported and injected into the constructor of your current TS file. It should look like the following in case you are not sure.

import { NavController } from "ionic-angular";

Then in constructor

constructor(public navCtrl: NavController, .....) {

}

Once you have the navigation controller and the page(s) imported you can proceed to create a function like so

navigateToOtherPage(): void {
   this.navCtrl.push(OtherPage);
}

That completes the navigation setup for your TS file. Now you go to the relevant template you want to navigate from and you can use any tags you want for instance

<button (click)="navigateToOtherPage()">Next Page<button>

or you can use an a, span or div in a similar way

<a (click)="navigateToOtherPage()">Other Page</a>
<span (click)="navigateToOtherPage()">Other Page</span>
<div (click)="navigateToOtherPage()">Other Page</div>

You don't necessarily have to use the click event you can use whatever event you want. The main things are that you have the navigation controller imported and injected in your constructor as shown above and you have the page(s) you want to navigate to imported as well and you only use the navigation controller to push pages you want to navigate to.

Answer 5

Place button inside anchor tag.

 <a href="path of the file"><button>Name</button></a>

You can also refer this link: http://www.w3schools.com/tags/tag_a.asp