[FIXED] How do i get the selected Item in a Tabmenu from Primeng

Issue

i have a simple MenuItem Array that i use to fill the Tabmenu component from primeng. This looks something like this:

.ts file:

items = MenuItem[];
activeItem = MenuItem;

//constructor etc...

ngOnInit() {

    this.items = [
                {label: 'Homework', icon: 'fa-file-pdf-o'},
                {label: 'Movies', icon: 'fa-file-pdf-o'},
                {label: 'Games', icon: 'fa-file-pdf-o'},
                {label: 'Pictures', icon: 'fa-file-pdf-o'}
            ];
this.activeItem = this.items[2]
}

.html file:

<p-tabMenu [model]="items" [activeItem]="activeItem"></p-tabMenu>

I know i can set the Active item of the tabmenu with the help of the activeItem like so:

this.activeItem = this.items[2]

My question now is can i somehow retrieve the activeItem on click? e.g.

<p-tabMenu [model]="items" [activeItem]="activeItem" (click)="getActiveItem(...)"></p-tabMenu>

getActiveItem Method:

getActiveItem(activeItem: MenuItem){
    this.activeItem = activeItem;
    console.log(activeItem);
    return this.activeItem;
  }

P.S a link to the TabMenu from Primeng. CLICK

Solution

You should be able to use command since tabs are part of the MenuModel API

The function to invoke when an item is clicked is defined using the
command property.

this.items = [
   ...
  {label: 'Pictures', icon: 'fa-file-pdf-o', command: (event) => {
    //event.originalEvent: Browser event
    //event.item: menuitem metadata
  }}
];

Answered By – Michael Doye

Answer Checked By – Willingham (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published