CODEWITHSUNDEEP
ionic-frameworkionic4
Kuldeep
Kuldeep

Reputation: 4552

How to Move from one page to another in ionic 4?

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.

enter image description here

Any help will be appreciated

Upvotes: 5

Views: 14967

Answers (2)

Phonolog
Phonolog

Reputation: 6521

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.

Upvotes: 16

alex87
alex87

Reputation: 472

To add to @Phonolog 's answer you should also use routerDirection="forward" or whatever direction it may be.

Upvotes: 0

Related Questions