Angular – Router usage (Angular 10)

Angular Navigation and Routing Basics

For SPA (Single Page Application), Routing is one of important things to understand.

Angular support Routing using @angular/router.

This entry supports

• Simple Routing
• Path Parameter
• Link
• Navigation by code

Create Router boiler plate

The simple way to create router with command

ng new testapp2 --routing --style scss

To do this, app-routing.module.ts is automatically generated.

This file managed routing, and module is automatically imported into app.module.ts

Prepare routing component

In this time, prepare following routing

localhost:4200/
localhost:4200/welcome
localhost:4200/products
localhost:4200/products/:id
localhost:4200/welcome

app-routing.module.ts

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

import { WelcomeComponent } from './welcome/welcome.component';
import { ProductlistComponent } from './productlist/productlist.component';
import { ProductComponent } from './product/product.component';

const routes: Routes = [
  { path: 'products', component: ProductlistComponent },
  { path: 'products/:id', component: ProductComponent },
  { path: 'welcome', component: WelcomeComponent }
];

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

Let’s check top page and other component

app.component.html

This is top page and support router and links

<ul>
  <li><a [routerLink]="['/welcome']">Home</a></li>
  <li><a [routerLink]="['/products']">Product List</a></li>
  <div class="container">
    <router-outlet></router-outlet>
  </div>
</ul>

Parameter

Next is ProductComponent.

This Component takes :id.

product.component.s

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

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss']
})
export class ProductComponent implements OnInit {

  pageTitle = '';

  constructor(private route: ActivatedRoute) {
    console.log(this.route.snapshot.paramMap.get('id'));
    let id = +this.route.snapshot.paramMap.get('id'); // +  <- parameter to string
    this.pageTitle += `:${id}`
  }

  ngOnInit(): void {
  }

}

Navigation by code

Next is to support navigation by clicking button. Different from anchor tag, button needs to call navigation method using Router class

welcome.component.ts

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

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.scss']
})
export class WelcomeComponent implements OnInit {

  constructor(private router: Router) {}

  ngOnInit(): void {}

  onBack(): void {
    this.router.navigate(['/products']);
  }
}

welcome.component.html

<p>welcome works!</p>
<button (click)="onBack()">Go Product</button>

Hashmode?

By default, Angular uses HTML5 mode.

To support hash mode,

@NgModule({
  imports: [
     RouterModule.forRoot([], { userHash: true })
  ]
})