MenuModel API

TabMenu uses the common menumodel api to define its items, visit for details.

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

ActiveItem

By default item that matches the active route is highlighted, alternatively activeItem property can be used choose the initial active item.

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

Menuitem content supports templating via the "item" template which gets the menuitem instance and the index.

<p-tabMenu [model]="items">
    <ng-template pTemplate="item" let-item let-i="index">
    </ng-template>
</p-tabMenu>
 

Properties

Dependencies

None.

Source

View on GitHub

export class TabMenuDemo {
    items1: MenuItem[];
    activeItem: MenuItem;
    ngOnInit() {
        this.items1 = [
            {label: 'Stats', icon: 'fa fa-fw fa-bar-chart'},
            {label: 'Calendar', icon: 'fa fa-fw fa-calendar'},
            {label: 'Documentation', icon: 'fa fa-fw fa-book'},
            {label: 'Support', icon: 'fa fa-fw fa-support'},
        ];
        this.items2 = [
            {label: 'Stats', icon: 'fa fa-fw fa-bar-chart'},
            {label: 'Documentation', icon: 'fa fa-fw fa-book'},
            {label: 'Support', icon: 'fa fa-fw fa-support'},
            {label: 'Social', icon: 'fa fa-fw fa-twitter'}
        ];
        this.activeItem = this.items2[0];
    }
    closeItem(event, index) {
        this.items2 = this.items2.filter((item, i) => i !== index);
        event.preventDefault();
    }