3d cartoon hands holding a phone

Unlock full course by purchasing a membership

Lesson 3

Navigation in an Ionic Application

Special navigation concepts that only apply to Ionic

STANDARD

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.

STANDARD
Key

Thanks for checking out the preview of this lesson!

You do not have the appropriate membership to view the full lesson. If you would like full access to this module you can view membership options (or log in if you are already have an appropriate membership).