Rename a tab in p-tabview

Question

I have created a p-tabview with each tab containing some content using:

<p-tabView class="tabmain"  >
    <ng-container *ngFor="let tab of tabs">
        <p-tabPanel [header]="tab.header" >
           <p-table 
....

I intend to provide a use model to rename the tabs in the tab header. I can think of 2 options :

1. Provide a context menu(right mouse click) on the tabs with rename menu option which on click will open some dialogue to enter new tab name.
2. Provide a rightIcon next to the tab text like an edit icon which on click should again open some dialogue to ask the user for the new name.

Problem is I don't see any material whatsoever for the above 2 options provided for p-tabview. My doubt is whether such feature is even supported by p-tabview ? If yes, then please suggest the way to implement it.

Answer 1

you can create a custome tab header and add a button to show dialog to rename the header , in this example I use an array of object represent tab header and content

<p-tabView>
    <p-tabPanel *ngFor="let tab of tabs">
        <ng-template pTemplate="header">
            <label for="">{{tab.header}} </label>
            <button pButton type="button" icon="pi pi-pencil" 
             class="p-button-help" (click)="showDialog(tab)"></button>
        </ng-template>
        {{tab.content}}
    </p-tabPanel>
</p-tabView>

the dialog just have a textbox to change the title

<p-dialog header="Update tab title" [(visible)]="display">
    <div>
        <label for="Title"></label>
        <input type="text" [(ngModel)]="selectedItem.header">
    </div>
</p-dialog>

component

  tabs = [
    {
      header: "header1",
      content:
        "😀Lorem ipsum dolor sit amet, consectetur adipiscing elit, ....... "
    },
   ...
  ];

  display = false; // dialog visible state
  selectedItem :any= {}; // holder for tab object

  showDialog(selectedItem) :void {
    this.selectedItem = selectedItem; // set the current tab object
    this.display = true; // trigger the dialog visibility 
  }

demo 🚀