CODEWITHSUNDEEP
angularrxjsprimengbreadcrumbs
Yogesh
Yogesh

Reputation: 801

Angular PrimeNG Breadcrumbs not changing dynamically

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.

Upvotes: 0

Views: 2932

Answers (1)

Yogesh
Yogesh

Reputation: 801

Use the spread operator for assigning this.item.

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

Upvotes: 5

Related Questions