I want to move from 1 page to another page and for that I have write below code in home.page.html
file.
<div style="display: flex; justify-content: center; margin-top: 20px; margin-bottom: 20px;">
<ion-button (click)="goToLoginPage()" size="large">Continue</ion-button>
</div>
Below is home.page.ts
file code.
export class HomePage {
constructor(public navController: NavController) {
}
goToLoginPage(){
this.navController.navigateForward(LoginVCPage) // Getting error at this line.
}
}
Below is error screenshot.
Any help will be appreciated
Ionic has a similar concept where you can only view the page on top of the navigation stack. If you want to navigate to another page, you need to do one of these two actions: Push: Push the page on the stack.
tab by using select(2) (the counting starts at 0 like always). If we now click the first button, we see a tiny animation that brings in the next view. And what we also see is that we automagically get a back arrow at the top! This is done by Ionic internally, as we have pushed a page on the navigation stack.
In Ionic 4 with Angular routing, there is no root page to be defined. Because Ionic 4 relies on Angular's router, the NavController has been changed to reflect this new reality, and for an Angular application there is no such a thing like "root" route.
In Ionic 4 using NavController
is deprecated. See this statement from the Migration Guide:
In V4, navigation received the most changes. Now, instead of using Ionic's own NavController, we integrate with the official Angular Router.
Angular manages it's routes in a separate file, in Ionic 4 this file is named app-routing.module.ts
. Every time you create a new page using ionic g page pagename
the CLI will automatically create a new entry in the routes
array in app-routing.module.ts
.
So assuming you have created a test page and now have following routes in app-routing.module.ts
:
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: './home/home.module#HomePageModule' },
{ path: 'test', loadChildren: './test/test.module#TestPageModule' },
];
You can move to another page by adding a href property to your button with the corresponding path (e.g. '/test'
) to the page you want to move to:
<ion-button href="/test">Move to test page</ion-button>
You could also use the routerLink
directive as pointed out here:
<ion-button [routerLink]="['/test']">Move to test page</ion-button>
If you want/need to navigate programmatically you'll have to inject the router service into your page/component and call navigateByUrl
like so:
constructor(private router: Router) { }
goToTestPage() {
this.router.navigateByUrl('/test');
}
Also see the Angular docs on routing and the Ionic v4 docs on this topic.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With