breadcrumb not always updating after Angular route changes

Question

I have an Angular 8.2 application with a dashboard and links to other sections of the application. When a person clicks on a section link say 'Data Management', the section name is displayed in the navbar. For some reason the names of two sections do not display in the navbar after clicking on their respective links even though the variable used is being updated.

Here is my code in the navbar component that sets the breadcrumb name:

ngOnInit(): void {
        this._routerSubscription = this.router.events
            .pipe(
                filter((event: any) => event instanceof NavigationEnd),
                distinctUntilChanged()
            )
            .subscribe((navigationEnd: NavigationEnd) => {
                const root: ActivatedRoute = this.activatedRoute.root;
                this.getLoadedAppName(root);
                this.cdr.markForCheck(); // needed to manually trigger change detection
            });
    }
public getLoadedAppName(route: ActivatedRoute) {
        if (route.firstChild.snapshot.firstChild.data['breadcrumb']) {
            this.currentloadedapp = route.firstChild.snapshot.firstChild.data['breadcrumb'];
            console.log('currentloadedapp has changed to ' + this.currentloadedapp);
        } else {
            this.currentloadedapp = '';
            console.log('currentloadedapp has no value');
        }
    }

When I go from the dashboard to these two sections, the breadcrumb name doesn't display even though the code is getting to the console.log line of 'currentloadedapp has changed to...', but when I go from one section to one of these sections the breadcrumb displays. I can't figure it out. The ngOnInit always fires when I navigate to a new section. Do I need to use a different lifecycle hook?

UPDATE Here is my navbar component html where the breadcrumb name is being displayed:

<header class="app-header">
  <nav class="navbar navbar-expand-lg fixed-top navbar-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand p-1" [routerLink]="['/dashboard']">
      <img class="icon" src="img/logo_white.png" alt="logo" />
    </a>
    <div class="app-title">
      <h1>{{ currentloadedapp }}</h1>
    </div>   
    <ul class="navbar-nav flex-row mr-4">
      ...
    </ul>
  </nav>
</header>

Answer 1

I figured out how to solve it. I added a markForCheck inside the subscribe function after the currentloadedapp variable is set. It had to do with the subscribe function. I got the solution from this post: https://stackoverflow.com/a/40707669/2026659. What I didn't figure out is why the view got updated when navigating to certain sections but not others. The important thing is the breadcrumb displays consistently now.