Reputation: 119
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.
Upvotes: 11
Views: 102589
Reputation: 177
Many solutions I have tried don't work, but this one below it does for me.
To go from home page to another page just watch this video: https://www.youtube.com/watch?v=paRZyKDHPak
in the home.page.ts file add
import { Router } from "@angular/router";
set the constructor
constructor(public router:Router) {}
create the function
redirectToOther(){
this.router.navigateByUrl('other');
}
you guys can add a "go back button" to go back to the home page just adding this HMTL code in other.page.html, that's it
<ion-buttons slot="start"><ion-back-button defaultHref="home"></ion-back-button></ion-buttons>
Upvotes: 1
Reputation: 172
You can use this simple way:
<ion-button routerLink="/myPageName" routerDirection="root">
Go to myPageName!
</ion-button>
Upvotes: 1
Reputation: 6335
For Ionic 5 - below code is working for me, with Ionic 5 + Angular 9 combination,
Step 1 - In html file, add the code to "define" the function,
<ion-button (click)="gotoHomePage()">Go to Homepage</ion-button>
Step 2 - In the constructor of your class, you can Inject the NavController
- Injecting NavController will always get you an instance of the nearest NavController
, regardless of whether it is a Tab or a Nav.
constructor(public navCtrl: NavController) { }
Step 3 - In TS file for your component, add the method that you are calling on click of ion-button,
gotoHomePage() {
this.navCtrl.navigateForward('home');
}
Here the 'home' is defined route in your app-routing.module.ts
file, like below,
{ path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomePageModule) },
Upvotes: 2
Reputation: 11
Please use below code in Ionic 4 to go one page to another page:
<ion-button expand="block" routerLink="/dashboard" routerDirection="root">Home</ion-button>
(routerLink) to set the page name to when you go to the page.
Upvotes: 1
Reputation: 21
Basically you would navigate to a different page in the same way as if you were in Angular.
Important thing to remember is that Ionic routes are essentially Angular routes. To learn more about how they work, visit: https://angular.io/guide/router
To answer your question.
Let's imagine you want to redirect a user to your About page.
Within your app-routing.module.ts you have a path that goes:
{
path: 'about',
loadChildren: () => import('./pages/about/about.module').then( m => m.AboutPageModule)
}
Then in the tags of a button, you want add the classical Angular router call that goes like this:
<ion-button color="dark" expand="block" fill="outline" routerLink="/about">Go!</ion-button>
Basically, routerLink="/name-of-the-path" can be used on your buttons or tags to redirect the user to the desired location.
Hope this helps!
Upvotes: 1
Reputation: 321
html
<ion-button (click)="nextpage()">Home</ion-button>
ts
import { Router } from '@angular/router';
constructor(private route: Router) { }
nextpage() {
this.route.navigate(['/home']);
}
Upvotes: 11
Reputation: 1084
You can call a route like this.
<button onclick="location.href='/pageToRoute/param'" block>
</button>
Upvotes: 0
Reputation: 1224
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);
}
Upvotes: 13
Reputation: 577
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.
Upvotes: 6
Reputation: 1
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>
Upvotes: -4
Reputation: 2387
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
Upvotes: 1
Reputation: 693
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
Upvotes: -13