Fix: Header not working with router links

src/app/header/header.component.html

@@ -1,6 +1,6 @@
 <mat-toolbar class="header">
     <nav>
-        <a routerLink="'/'" mat-button>
+        <a routerLink="" mat-button>
             <mat-icon>badge</mat-icon>
             EMS</a>
         @for (route of routes; track route) {

src/app/header/header.component.ts

@@ -1,9 +1,9 @@
-import {AsyncPipe, Location, TitleCasePipe} from '@angular/common';
+import { AsyncPipe, TitleCasePipe } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { MatAnchor, MatButton, MatIconButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 import { MatToolbar } from '@angular/material/toolbar';
-import {Router, RouterLink} from '@angular/router';
+import { EventType, Router, RouterLink } from '@angular/router';
 import { AuthService } from '@core/auth/auth.service';
 
 @Component({
@@ -26,22 +26,24 @@ export class HeaderComponent implements OnInit {
 
     constructor(
         private router: Router,
-        private location: Location,
         protected auth: AuthService
     ) {
     }
 
     ngOnInit(): void {
-        this.routes = this.router.config
+        const routes = this.router.config
             .filter(route => !route.path?.includes(':'))
-            .filter(route => !route.path?.includes('/'))
-            .map(route => ({
+            .filter(route => !route.path?.includes('/'));
+
+        this.router.events.subscribe((event) => {
+            if (event.type != EventType.NavigationEnd) {
+                return;
+            }
+            this.routes = routes.map(route => ({
                 path: `/${route.path}`,
                 title: route.title as string,
-                class: `/${route.path}` == (this.location.path() || '/') ? 'active' : ''
+                class: `/${route.path}` == event.url ? 'active' : ''
             }));
+        });
     }
 }
-
-
-