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>

Could you post the relevant HTML code aswell? Because if this.currentloadedapp changes, and you interpolate it in the HTML template with `{{currentloadedapp}}` then it should work. — Robin De Schepper, Oct 19 '19 at 17:55
I think your problem it's not about the lifecycle, using in ngOnInit is correct. I have implemented a breadcrumb, as yours (different obviously) If i can see an stackblitz maybe I can help you. Anyway, I use the route.snapshot.url[0].path (of the firstChild route) to get the section and it works for me — Kalamarico, Oct 19 '19 at 22:01

score 0 · Accepted Answer · answered Oct 20 '19 at 19:15

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.

breadcrumb not always updating after Angular route changes

1 Answers1