PrimeNg tabview tabs selection

Issue

In the closable section of prime ng's tabview documentation, I see that when I remove the last tab, it goes to the first tab. My question is: How can I make it go to the tab on the left instead of the first tab? (I guess it's a situation where tabIndex takes values ​​of 0 and -1). When changing the TabIndex value, is there a way to give the tab to the left of the closed tab instead of the first tab? ( Sample behavior should be as follows: Let there be tabs 1, 2 and 3. When I close number 3, I want tab number 2 to be shown). Thanks in advance.

Example from geeks for geeks I want to do same like this but i dont know actually how its working?

Here is some of my source code :

<div  style="float: left;" [style.width] ="this.splitWindows ? '50%' : '100%'">
                  <p-tabView  (onClose)="handleCloseLeft($event)" [scrollable]="isScrollable" (click)="consolelog(activeTabIndex)" (onChange)="handleOnChange($event)" [(activeIndex)]="activeTabIndex"] >
                    <p-tabPanel *ngFor="let item of leftTabItems; let i = index" [selected]="i == activeTabIndex"  [closable] = "item.closable">
                      <ng-template pTemplate="header">
                        <div #tabPanelRightClick>
                          {{item.header}}
                        </div>
                        <p-contextMenu appendTo="body" [target]="tabPanelRightClick" [model]="items"></p-contextMenu>
                      </ng-template>
                      <ng-content *ngComponentOutlet='item.component.component; inputs:item.params'/>
                    </p-tabPanel>
                  </p-tabView>
                </div>

Active tab indexes take values ​​like 0,1,2,3,4.. and the behavior I expect is that when the 4th activeTabIndex is closed, the 3rd activeTabIndex appears on the screen, but it seems to go to the 0th index where my Homepage is located. (This is no matter what index it is. It works as follows.)

Here's the code of HandleCloseLeft:

handleCloseLeft(event): void {
this.tabService.removeTabItem(event.index);

console.log("event index'i  : " + event.index);
console.log(this.leftTabItems.length);
// this.activeTabIndex = 0;
if (event.index < this.leftTabItems.length) {
   this.activeTabIndex = event.index;
 } else {
   this.activeTabIndex = this.leftTabItems.length - 1;
 }

this.leftTabItems.splice(event.index, 1);

// if(event.index > this.activeIndex) {
//   this.activeIndex = event.index - 1;
// }

}

Solution

There is some bug in prime-ng which does not update the current tab programmatically, if we change the active index.

You can raise a bug on their github to fix it. As a temporary workaround please use the below solution! Kindly go through the below stackblitz and let me know if any doubts!

ts

import { Component, ViewChild } from '@angular/core';
import { TabView } from 'primeng/tabview';

@Component({
  selector: 'tab-view-closable-demo',
  templateUrl: './tab-view-closable-demo.html',
})
export class TabViewClosableDemo {
  @ViewChild('tabView') tabView: TabView;
  activeTabIndex = 0;
  tabArray = [1, 2, 3, 4, 5];

  handleCloseLeft(event: any) {
    console.log(event);
    this.tabArray.splice(event.index, 1);
    this.activeTabIndex = this.tabArray.length - 1;
    this.tabView.cd.detectChanges(); // = this.activeTabIndex;
  }
}

html

<div class="card">
  <p-tabView
    #tabView
    id="closableTabView"
    (onClose)="handleCloseLeft($event)"
    [(activeIndex)]="activeTabIndex"
  >
    <p-tabPanel
      header="Header I"
      [selected]="first"
      *ngFor="let tab of tabArray; let i = $index;let  first = $first"
      [closable]="true"
    >
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
    </p-tabPanel>
  </p-tabView>
</div>

stackblitz

Answered By - Naren Murali