Navigation in an Ionic Application

Navigation in an Ionic Application

We have already seen how to navigate in an Angular application. The general idea is that we either use routerLink in the template:

<a routerLink="/settings">Go to settings</a>
<a [routerLink]="['/movie', movie.id]">Dune</a>

or we use Router in the class:

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-home',
  template: `
    <p>I am the home page</p>
    <button (click)="handleLogin()">Login</button>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HomeComponent {
  constructor(private router: Router) {}

  handleLogin() {
    // Do the login and then:
    this.router.navigate(['settings']);
  }
}

However, Ionic introduces its own concepts into navigation - this is mostly just to allow for Ionic to correctly apply the transition animations that it needs to add in when switching between views.

We have already seen that we need to use the special <ion-router-outlet> to display our routed components in Ionic, but there are some additional things we need to be aware of as well. Let’s take a look.

Navigating in the Template

Navigating in the template is almost the same with Ionic - we still use the routerLink, for example:

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IonButton, IonRouterLink } from '@ionic/angular/standalone';

@Component({
  selector: 'app-home',
  template: `
    <ion-button routerLink="/home" routerDirection="forward" />
  `,
  imports: [IonButton, IonRouterLink],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HomeComponent {
}