question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] Breadcrumbs dont get populated

See original GitHub issue

🐞 Bug report

I can’t populate BreadCrumbs dynamically. Trying to populate it through a service that gets the current page URL (window.location.pathname) and splits it at each “/”. Each element of the outputted array should be an element of the BC list.

If I hardcode a list of objects the BC get populated without any issue

However, I can *ngFor over the list of fetched elements from the service and display them in the template under any other compoment or html element.

<tui-breadcrumbs>
<ng-container *ngFor="let bc of breadcrumbs">
 <a *tuiBreadcrumb tuiLink [routerLink]="bc.routerLink">
{{ bc.caption}}
 </a>
</ng-container>
</tui-breadcrumbs>

Here’s the service that retrieves the url, splits it and returns an array of Breadcrumbs objects ({ caption: string, routerLink: string}):

getBreadcrumbs(): Observable<Breadcrumb[]> {
    this.ITEMS = []
    this.routerLink = ''
    window.location.pathname.split('/').forEach(element => {
      if (element != '') {
        this.routerLink = this.routerLink.concat(element, '/')
        this.ITEMS.push({
          caption: element,
          routerLink: this.routerLink
        })
      }
    })
    const routes = of(this.ITEMS);
    return routes;
  }

I believe there is something wrong with this ngFor within the ng-container related to Taiga. I can *ngFor over the breadcrumbs array outside of it and all the elements are shown correctly (for example, i can display a list of buttons with each element being an element of the array)

Reproduction

Expected behavior

Versions

  • OS: ubuntu
  • Browser firefox
  • Angular 11
  • Package Latest 2.13.0

Additional context

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
waterpleacommented, Jul 19, 2021

Thank you 😃

0reactions
sendoggocommented, Jul 16, 2021

I’ll give a try, ty

Read more comments on GitHub >

github_iconTop Results From Across the Web

breadcrumbList schema data not populating when adding ...
When a theme adds breadcrumb support add_theme_support( 'yoast-seo-breadcrumbs' ); the breadcrumbList schema.org data does not populate.
Read more >
Recent update makes Google complain about breadcrumb issue
Your code is generating the erroneous output, so this is for you to fix. You can't say the input is bad. You don't...
Read more >
Child incident does not get populated with info fr... - ServiceNow ...
Hello everyone, We have recently purchased ServiceNow Express. On a video online I could see how I could see how the fields in...
Read more >
Issues for Custom Breadcrumbs | Drupal.org
Title Status Priority Category Version Co... Deprecated function: preg_split() on PHP 8.1 Needs review Normal Bug report 1.x‑dev Co... PHP warning for Uninitialized string offset...
Read more >
Problems with Breadcrumb on custom-post-type - Pinegrow WP
Hi experts I have a WP project with pages and custom-post-types. ... Custom Post Type: Breadcrumbs don't work there (CPT are not structured)...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found