How do i set the active tab in PrimeNG tabMenu?

Question

Where I do declare activeIndex and how to use this variable ?

I have html file:

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

and typescript file:

tabMenuItems: MenuItem[];
private stateId: number;
private id: number;
...
ngOnInit() {
   this.tabMenuItems = [
        {label: 'Bar1', icon: 'ui-icon-insert-chart',
            command: (event: any) => {
                this.router.navigate(['/#', 
             this.id],{ queryParams: {'stateId': this.stateId} }); }
        },
        {label: 'Bar2', icon: 'ui-icon-date-range',
            command: (event: any) => {
                this.router.navigate(['/#', this.id],{ queryParams: {'stateId': this.stateId} }); }
        },
        {label: 'Bar3', icon: 'ui-icon-book',
            command: (event: any) => {
                this.router.navigate(['/#', this.id],
                    { queryParams: {'stateId': this.stateId} }); }
        },
        {label: 'Bar4', icon: 'ui-icon-help-outline',
            command: (event: any) => {
                this.router.navigate(['/#', this.id],
                    { queryParams: {'stateId': this.stateId} }); }
        },
        {label: 'Bar5', icon: 'ui-icon-public',
            command: (event: any) => {
                this.router.navigate(['/#', this.id],
                    { queryParams: {'stateId': this.stateId} }); }
        }
    ];

How can i set the active tab, so each menuitem activate the corresponding tab?

Answer 1

Documentation

Set [activeItem] property on the tabMenu.

Example

ngOnInit() {
   this.tabMenuItems = [
        {label: 'Bar1', icon: 'ui-icon-insert-chart',
            command: (event: any) => {
                this.router.navigate(['/#', 
             this.id],{ queryParams: {'stateId': this.stateId} }); }
        },
        {label: 'Bar2', icon: 'ui-icon-date-range',
            command: (event: any) => {
                this.router.navigate(['/#', this.id],{ queryParams: {'stateId': this.stateId} }); }
        },
        {label: 'Bar3', icon: 'ui-icon-book',
            command: (event: any) => {
                this.router.navigate(['/#', this.id],
                    { queryParams: {'stateId': this.stateId} }); }
        },
        {label: 'Bar4', icon: 'ui-icon-help-outline',
            command: (event: any) => {
                this.router.navigate(['/#', this.id],
                    { queryParams: {'stateId': this.stateId} }); }
        },
        {label: 'Bar5', icon: 'ui-icon-public',
            command: (event: any) => {
                this.router.navigate(['/#', this.id],
                    { queryParams: {'stateId': this.stateId} }); }
        }
    ];

    this.activeTab = this.tabMenuItems[1];
}

In HTML

<p-tabMenu [model]="tabMenuItems" [activeItem]='activeTab'></p-tabMenu>

Answer 2

Have you tried using "routerLink:" instead of "command:()=>"?

It should not be necessary to assign the [activeItem] at all as this should be done via routing automatically. But yet you could assign it manually as follows:

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

Refering to this very simple example in stackblitz you can see that when using the "command:()=>" option it will not have any effect of changing the active tab (e.g. when reloading the page or entering the URL manually, no tab will be selected). The "routerLink:" option works just fine on the other hand.

You can also refer to this post at the forum of primefaces