How to navigate to another page in ionic | Navigation in ionic

How to navigate to another page in ionic

Angular navigation plays most important role in ionic app.The Angular Router is one of the
most important libraries in an Angular application. Without navigation, apps would be single
view/single context apps or would not be able to maintain their navigation state on browser
reloads. There are different ways to navigate from one page to another page. Initially our
app-routing.module.ts file look like below. path: ' ' , load index page and redirect to home page.

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then( m => 
  m.HomePageModule)},
  { path: 'slideshow', loadChildren: './slideshow/slideshow.module#SlideshowPageModule'},

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

1. One way of navigation by using routerLink. RouterLink works on a similar idea as ofhref but instead of building out the URL as a string, it can be built as an array, which can provide more complicated paths.

<ion-header>
  <ion-toolbar>
    <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-button href="/detail">Go to detail</ion-button>
  <ion-button [routerLink]="['/detail']">Go to detail</ion-button>
</ion-content>

2. Navigation in ionic can also be done by programmatically in our app by using the router API.

<ion-header>
  <ion-toolbar>
    <ion-title>home</ion-title>
  </ion-toolbar>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</ion-header>
<ion-content>
  <section class="splash_banner">
   <ion-button color="primary" (click)="goAnotherPage()"></ion-button>
  </section>
</ion-content>

Open home.page.ts file, you will see this code inside. And we have to make changes like below ..

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  constructor() { }
}

We have added here two lines that is , import { Router } from '@angular/router'; and add parameter to the constructor to get the routing Api context. And then call navigate method in your declared function. In some pages you will see
' ngOnInit() {} ' and this is called when a page is loaded. That means we can initialise variables here .

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';   //import router
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  constructor(private router: Router) { }

  goAnotherPage(){     // declare function here
    this.route.navigate(['/pagename']);
  }
}