Button to new state

ionic-v1
#1

Hi guys,

I was searching for hours now to find a solution, but still not working.

I just want so create a button which redirect me to an other html im my templates folder.

Codepen with little code parts

Think there will be a simple solution for that issue.
Perhaps its nice to know that these are my first steps in app programming.
Doing this in Visual Studio 2015.

Thanks for the answers :slight_smile:

#2

I believe you are looking for the NavController.

Just import it from 'ionic-angular' package, declare it your page Component’s constructor and push another page Component (that has an html attribute declared of course) using NavController. Check this example I copied from the docs for, say, a my-current-page.ts file:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { OtherPage } from './other-page'; // make sure this path is correct to the other-page.ts file
//... other imports here

@Component(
  //.... component attributes here    
)
export class MyCurrentPage {
  constructor(public navCtrl: NavController) {}
  //... your other functions here
}

Then all you have to do on your my-current-page.html file is add an html button with an angular2 event handler that pushes a new page on click, using the navController instance we created in our constructor, like so:

<button ion-button (click)="this.navCtrl.push(OtherPage)">
  Go to OtherPage
</button>

You can also pass parameters to the OtherPage Component as you push it to transfer state and read them from there using NavParams. Furthermore I strongly suggest wrap all view switches in the html file’s event handlers using functions declared in your ts file. It’s the best practice to keep as much of your controller’s logic out of your template files.

You will find detailed code examples for all these in the great ionic docs.

1 Like
#3

Thanks for the information.
I`m doing pretty hard in understanding this stuff. But I will do my homework and try to include what you posted :slight_smile:
I don’t want to ask every question here, so google will hopefully help me out.

#4

For this kind of stuff just check the official ionic docs and this demo app by the ionic team that has most of the things anyone needs to get started, as working example code.

I believe going this route would be better than googling blindly.

If you haven’t already, check also a quick crash course video by the team before you do anything else.

Happy coding!

#5

Thanks. Think i found what was the difference.
Was running on V1 and your code is for V2.

Think V2 should cover most things better, isn’t it?

Thanks alot for your quick answers
going to watch the video :slight_smile:

#6

Long story short, if you’re just starting out with Ionic or if you don’t have a very specific reason to work in ionic1 (you would know if you had), work with ionic2, it’s just better on all fronts.