'How do i set the active tab in PrimeNG tabMenu?

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?

Solution 1:^[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>

Solution 2:^[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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Suren Srapyan
Solution 2	flawesome

'How do i set the active tab in PrimeNG tabMenu?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]