EMS/src/app/header/header.component.ts

import {Location} from '@angular/common';
import {Component, OnInit} from '@angular/core';
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';

@Component({
    selector: 'app-header',
    imports: [
        MatToolbar,
        MatAnchor,
        RouterLink,
        MatIcon,
        MatButton,
    ],
    templateUrl: './header.component.html',
    styleUrl: './header.component.scss'
})
export class HeaderComponent implements OnInit {
    routes: Array<{ path: string, title: string, class: string }> = [];

    constructor(
        private router: Router,
        private location: Location
    ) {
    }

    ngOnInit(): void {
        this.routes = this.router.config
            .filter(route => !route.path?.includes(':'))
            .filter(route => !route.path?.includes('/'))
            .map(route => ({
                path: `/${route.path}`,
                title: route.title as string,
                class: `/${route.path}` == (this.location.path() || '/') ? 'active' : ''
            }));
    }
}