Routing pages via side-menu in Ionic 4

Question

     For days now I've been trying to route/link pages via the side-menu. So that I'm able to move to different pages from the side-menu itself. I've searched for tutorials on Angular 8 and Ionic 4 but couldn't find the specific article that relates to my issue.

I'm supposing to route pages by creating components of the pages(items that will on the side-menu) for easier routing. I also somewhat know what codes to use for routing but don't know where to use it, since using the codes in the wrong place won't provide me any resolution.

This is my app.component.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule, routeComponents } from './app-routing.module';

@NgModule({
  declarations: [AppComponent, routeComponents],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}  

Below is the app-routing.module.ts file.

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { TrackComponent } from './track/track.component';
import { AboutComponent } from './about/about.component';
import { CategoryComponent } from './category/category.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.component').then( m => 
m.HomeComponent)},
  { path: 'category', loadChildren: () => import('./category/category.component').then( m => 
m.CategoryComponent)},
  { path: 'track', loadChildren: () => import('./track/track.component').then( m => 
m.TrackComponent)},
  { path: 'about', loadChildren: () => import('./about/about.component').then( m => 
m.AboutComponent)}
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export const routeComponents = [CategoryComponent, TrackComponent, AboutComponent, 
HomeComponent];

Please let me know if I also need to modify the html files for each menu-item. If possible please try to explain it to me in layman's term.

Answer 1

In ts file:

import { Router } from "@angular/router";

constructor(private router:Router){}
navtigateToPage(pageName){
 this.router.navigate([pageName]);
}

In html file:

<ion-item (click)="navtigateToPage('track')">
<ion-label>track</ion-label>
</ion-item>

(click) can be added to any node element (div,span,ion-icon...)