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.
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) },
html
<ion-button (click)="nextpage()">Home</ion-button>
ts
import { Router } from '@angular/router';
constructor(private route: Router) { }
nextpage() {
this.route.navigate(['/home']);
}
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>
You can call a route like this.
<button onclick="location.href='/pageToRoute/param'" block>
</button>
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.
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