09‐Programatic Navigation - zhamri/stiwk2124-Angular-Route GitHub Wiki

courses.html

<p>course works!</p>

<div class="mb-2">
  <button class="btn btn-success" (click)="goToCourse('stiwk2124')">Go to STIWK2124</button>
</div>

<div class="mb-2">
  <button class="btn btn-success" (click)="goToCourse('stiwk3014')">Go to STIWK3014</button>
</div>

<router-outlet />

courses.ts

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

export class Courses {

  constructor(private router: Router) {}

  goToCourse(courseCode: string) {
    this.router.navigate(['courses', courseCode]);
  }
}

OR use inject(Router)

import {inject} from '@angular/core';
import {Router} from '@angular/router';

export class Courses {

  router = inject(Router)

  goToCourse(courseCode: string) {
    this.router.navigate(['courses', courseCode]);
  }
}

⚠️ GitHub.com Fallback ⚠️