[FIXED] Angular PrimeNG Breadcrumbs not changing dynamically

Issue

Breadcrumbs component

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { BreadcrumbsService } from './breadcrumbs.service';

@Component({
  selector: 'app-breadcrumbs',
  templateUrl: './breadcrumbs.component.html',
  styleUrls: ['./breadcrumbs.component.scss'],
})
export class BreadcrumbsComponent implements OnInit {
  home: MenuItem = { icon: 'pi pi-home', routerLink: '/' };
  items: MenuItem[] = [];

  constructor(
    private service: BreadcrumbsService,
  ) {}

  ngOnInit(): void {
    this.service.items.subscribe((arr: MenuItem[]) => {
      this.items = arr;
      console.log(this.items);
    });
  }
}

In the console log, I can see the new items getting added but the p-breadcrumbs in the HTML is not getting updated.

The HTML

<p-breadcrumb styleClass="border-none mr-4" [model]="items" [home]="home"></p-breadcrumb>

P.S: When I tried with a simple ngFor in HTML I can see the new items getting added.

Solution

Use the spread operator for assigning this.item.

ngOnInit(): void {
    this.service.items.subscribe((arr: MenuItem[]) => {
      this.items = arr;
      this.items = [...this.items];
    });
  }

Answered By – Yogesh

Answer Checked By – Robin (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published