Fix Route Active Indicator

src/app/header/header.component.ts

@@ -3,6 +3,7 @@ import {MatAnchor, MatButton} from '@angular/material/button';
 import {MatIcon} from '@angular/material/icon';
 import {MatToolbar} from '@angular/material/toolbar';
 import {Router, RouterLink} from '@angular/router';
+import {Location} from "@angular/common";
 
 @Component({
     selector: 'app-header',
@@ -20,7 +21,8 @@ export class HeaderComponent implements OnInit {
     routes: Array<{ path: string, title: string, class: string }> = [];
 
     constructor(
-        private router: Router
+        private router: Router,
+        private location: Location
     ) {
     }
 
@@ -31,7 +33,7 @@ export class HeaderComponent implements OnInit {
             .map(route => ({
                 path: `/${route.path}`,
                 title: route.title as string,
-                class: `/${route.path}` == this.router.url ? 'active' : ''
+                class: `/${route.path}` == (this.location.path() || "/") ? 'active' : ''
             }));
     }
 }