CODEWITHSUNDEEP
javascriptangularprimeng
Ohan001
Ohan001

Reputation: 59

How to get a click on p-breadcrumb when click on home

export class BreadcrumbDemo implements OnInit {

    private items: MenuItem[];

    ngOnInit() {
        this.items = [
            {label:'Categories'},
            {label:'Sports'},
            {label:'Football'},
            {label:'Countries'},
            {label:'Spain'},
            {label:'F.C. Barcelona'},
            {label:'Squad'},
            {label:'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi'}
        ];
    }
}

In documentation onItemClick is provided but not explained how to use it

<p-breadcrumb [model]="items"></p-breadcrumb>

Upvotes: 1

Views: 3262

Answers (1)

ysf
ysf

Reputation: 4874

when in your template;

<p-breadcrumb [model]="items" (onItemClick)="itemClicked($event)"></p-breadcrumb>

in your component;

export class BreadcrumbDemo implements OnInit {

    private items: MenuItem[];

    ngOnInit() {
        this.items = [
            {label:'Categories'},
            {label:'Sports'},
            {label:'Football'},
            {label:'Countries'},
            {label:'Spain'},
            {label:'F.C. Barcelona'},
            {label:'Squad'},
            {label:'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi'}
        ];
    }

    itemClicked(event) {
       console.log(event.item);
    }
}

BTW, onItemClick is a new feature and it was added to PrimeNg on following releases:

I tested above code on 9.0.6 and it works. If you are using an older version than above releases it won't work.

UPDATE: I checked out breadcrumb implementation and I noticed that there is a partially documented feature here. Apparently MenuItem has documented command property which gets executed when item is clicked. Since it wasn't documented in p-breadcrumb it was not easy to spot the feature.

@Component({
  selector: "app-root",
  template: `
    <p-breadcrumb [model]="items"></p-breadcrumb>
  `
})
export class AppComponent {
  private items: MenuItem[] = [
    {
      label: "I am a clickable breadcrumb :)",
      command: e => {
        console.log(`"${e.item.label}" clicked!`);
      }
    },
    { label: "I am NOT a clickable breadcrumb :(" }
  ];
}

Here is a clickable breadcrumbs demo on [email protected]: https://stackblitz.com/edit/angular-6-template-kbxbb3

Upvotes: 4

Related Questions