How do I get the selected Item in a Tabmenu from Primeng?

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]


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.

Continue reading...