[Bug] app-ng7-mat-breadcrumb component not picking up on breadcrumb updates

[canpan14]

Bit of a weird issue so I'll give the full context. I have my component defined in the html to hide until I get all the data needed for it. <app-ng7-mat-breadcrumb [hidden]="isLoading"></app-ng7-mat-breadcrumb> Some basic code to get my data, set the breadcrumbs, and then show them

this.getInitialData().subscribe(
  (appData) => {
    const breadcrumb = { appName: appData.applicationName };
    this.breadcrumbService.updateBreadcrumbLabels(breadcrumb);
    console.log(this.breadcrumbService.breadcrumbLabels.value);
    this.isLoading = false;
  }
);

This works fine, but if I go back a page, then navigate here again using a different 'appName' it will still show the old one.

My relevant routes are

 // First page to choose an app
{ path: 'applications', component: ApplicationsComponent },
// Second page to display details about that app
{
  path: 'application/:appId', // Second page
  component: ApplicationSummaryComponent,
  data: {
    title: 'App Details',
    breadcrumb: [
      {
        label: 'Applications',
        url: '/applications'
      },
      {
        label: '{{appName}}',
        url: ''
      }
    ]
  }
}

Example: Initial Nav Second Nav Logs from above showing the breadcrumb service holding the correct value

[canpan14]

Note I was able to code a work around by having the ApplicationsComponent set the breadcrumb for the child. This shouldn't be necessary but seems to prove to me that there are more than one breadcrumb service instance being loaded. And the ApplicationSummaryComponent is setting a different one somehow. I have no idea how this happened.

[canpan14]

This will reproduce the issue https://stackblitz.com/edit/ng7-mat-breadcrumb-6nkaqh Click back and forth between the pageOneId 1 and 2 links on the main screen and watch the breadcrumbs on the next page.

[ieltxualganaras]

@canpan14 could you please tell me what the workarround is? until this bug gets fixed?

[ieltxualganaras]

shouldn't the module implement forRoot for this to work?

[canpan14]

That's might help. I didn't try forking this and recoding it yet, a little busy (sorry for the late reply).

Here is a version with the workaround. Note this is a little sloppy, but the important thing to note is that I'm calling update breadcrumb in the page.component.ts. Which updates the breadcrumbs on the next page for me. https://stackblitz.com/edit/ng7-mat-breadcrumb-e4cyks

[canpan14]

Found out how to fix it. Please note I only did it for the material angular one to show as an example. I left comments in the pull request, let me know if you need anymore information.

[andrii-oleksyshyn]

Hello, do we have any updates on this issue? Are there any problems with PR, when could it be merged?

[andrii-oleksyshyn]

I hotfixed this issue resetting breadcrumb with this.dynamicBreadcrumbService.updateBreadcrumbLabels([]); in ngDestroy hook.

[rajaramtt]

New Version unable to reproduce, We Believe issue has been fixed.