matrix-dimension/web/app/page-header/page-header.component.ts

import { Component } from "@angular/core";
import {
    ActivatedRoute,
    NavigationEnd,
    PRIMARY_OUTLET,
    Router,
} from "@angular/router";
import { TranslateService } from "@ngx-translate/core";
import { filter } from "rxjs/operators";

@Component({
    selector: "my-page-header",
    templateUrl: "./page-header.component.html",
    styleUrls: ["./page-header.component.scss"],
})
export class PageHeaderComponent {
    public pageName: string;

    constructor(
        private router: Router,
        private activatedRoute: ActivatedRoute,
        public translate: TranslateService
    ) {
        this.translate = translate;
        this.router.events
            .pipe(filter((ev) => ev instanceof NavigationEnd))
            .subscribe((ev) => {
                let currentRoute = this.activatedRoute.root;
                let url = "";
                const event = ev as NavigationEnd;

                while (currentRoute.children.length > 0) {
                    const children = currentRoute.children;
                    children.forEach((route) => {
                        if (route.snapshot.data["breadcrumb"]) {
                            this.translate
                                .get(route.snapshot.data["breadcrumb"])
                                .subscribe((res: string) => {
                                    route.snapshot.data["breadcrumb"] = res;
                                });
                        }
                        currentRoute = route;
                        url += "/" + route.snapshot.url.map((s) => s.path).join("/");
                        if (route.outlet !== PRIMARY_OUTLET) return;
                        if (!route.routeConfig || !route.routeConfig.data) return;
                        if (url === event.urlAfterRedirects.split("?")[0])
                            this.pageName = route.snapshot.data.name;
                    });
                }
            });
    }
}