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

Question

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

Answer 1

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
  }}
];

Answer 2

I just resolved it by creating a variable in the template refered to the menu, and then pass it to a function, inside the function you get the object with the active tab.

<p-tabMenu #tab [model]="items" (click)="activateMenu(tab)"></p-tabMenu>