How to redirect from one page to another in Ionic 4

Share the post

Hello All, In the last tutorial of Ionic 4 we discussed how to use infinite scroll in Ionic 4. In this tutorial, We will learn about How to redirect from one page to another in Ionic 4 with examples. But before proceeding to an example we have to learn about What is routing in angular? What are the different ways of routing available in Ionic 4?

What is routing in angular?

Routing is used to navigate different page/view in your application. Suppose, your application has many pages link with each other then you must want to go from one page to other, this can be done using angular routing.

What are the different ways of routing available in Ionic 4?

Angular routing in Ionic 4 can be done in two ways using HTML & one-way using TypeScript. We will see all of them using a simple example.

Routing using HTML

As mention earlier, there are two ways that can be used to route from one page to another. Follow the below steps to go from one page to another/ redirect in Ionic 4.

1. Create a new project in Ionic 4.

2. Create a new page routing-page-one by using the following command

ionic g page routing-page-one

3. Create another page routing-page-two using the following command

ionic g page routing-page-two

4. Now if we are in routing-page-one & we have to redirect to routing-page-two, then we can use the following 2 approach

A) href property:
Write below code in routing-page-one.page.html

<ion-item>
      <ion-label>Routing using href</ion-label>
</ion-item>
<ion-item>
      <ion-button href="/routing-page-two">Redirect to rounting-page-two</ion-button>
</ion-item>

B) routerLink directive
Write below code in routing-page-one.page.html

 <ion-item>
      <ion-label>Routing using routerLink</ion-label>
 </ion-item>
 <ion-item>
      <ion-button [routerLink]="['/routing-page-two']">Redirect to rounting-page-two</ion-button>
 </ion-item>

The above both methods are used by HTML. If we want to use TypeScript for routing then follow below way

C) using TypeScript

Write below code in HTML

<ion-item>
      <ion-label>Routing using ts</ion-label>
</ion-item>
<ion-item>
      <ion-button (click)="redirectTo()">Redirect to rounting-page-two</ion-button>
</ion-item>

Write below code in ts file

 redirectTo() {
    this.router.navigateByUrl('/routing-page-two');
  }

Full Source Code for HTML

<ion-header>
  <ion-toolbar>
    <ion-title>routing-page-one</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>Routing using href</ion-label>
    </ion-item>
    <ion-item>
      <ion-button href="/routing-page-two">Redirect to rounting-page-two</ion-button>
    </ion-item>

    <ion-item>
      <ion-label>Routing using routerLink</ion-label>
    </ion-item>
    <ion-item>
      <ion-button [routerLink]="['/routing-page-two']">Redirect to rounting-page-two</ion-button>
    </ion-item>


    <ion-item>
      <ion-label>Routing using ts</ion-label>
    </ion-item>
    <ion-item>
      <ion-button (click)="redirectTo()">Redirect to rounting-page-two</ion-button>
    </ion-item>
  </ion-list>


</ion-content>

Full Source code for ts

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

@Component({
  selector: 'app-routing-page-one',
  templateUrl: './routing-page-one.page.html',
  styleUrls: ['./routing-page-one.page.scss'],
})
export class RoutingPageOnePage implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
  }

  redirectTo() {
    this.router.navigateByUrl('/routing-page-two');
  }
}


Output

What is routing in angular?

Routing is used to navigate different page/view in your application.

Must Read

1 thought on “How to redirect from one page to another in Ionic 4”

Leave a Comment