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