הקדמה ל-Routing

import { RouterModule, Routes } from '@angular/router';
const appRoute: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  { path: 'courses', component: CoursesComponent },
  { path: '**', component: ErrorPageComponent },
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    ContactComponent,
    CoursesComponent,
    ErrorPageComponent,
  ],
  providers: [UserService],
  bootstrap: [AppComponent],
  imports: [BrowserModule, RouterModule.forRoot(appRoute)],
})

<div class="container">
  <header class="d-flex justify-content-center py-3">
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a routerLink="/" routerLinkActive="active" 
            [routerLinkActiveOptions]="{exact: true}" 
            class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a routerLink="about" routerLinkActive="active" 
            class="nav-link">About</a>
      </li>
      <li class="nav-item">
        <a routerLink="contact" routerLinkActive="active" 
            class="nav-link">Contact</a>
      </li>
      <li class="nav-item">
        <a routerLink="courses" routerLinkActive="active" 
            class="nav-link">Courses</a>
      </li>
    </ul>
  </header>

  <div class="container">
    <router-outlet></router-outlet>
  </div>
</div>

<a (click)="navigateToHome()" class="mb-4">Go to homepage</a>
<button (click)="navigateToHome()" class="mb-4">Go to homepage</button>

constructor(private route: Router){}

navigateToHome(){
    this.route.navigate(['Home']);
    this.route.navigateByUrl('Home');
}

constructor(private route: Router, private activatedRoute: ActivatedRoute) {}

navigateToHome() {
    this.route.navigate(['Home'], {relativeTo: this.activatedRoute});
}