[BUG] Breadcrumbs dont get populated

🐞 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

[waterplea]

Thank you 😃

[sendoggo]

I’ll give a try, ty