1

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.

user2695082
  • 285
  • 4
  • 16

1 Answers1

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

Muhammed Albarmavi
  • 23,240
  • 8
  • 66
  • 91
  • Thanks for such an elaborate and effective explanation. I tried this and it worked. Except, some problem with my dark theme where pencil icon is not visible totally. But that's a different issue. Just out of curiosity, is context menu implementation mentioned in point#1 also possible in p-tabview? – user2695082 Aug 10 '20 at 13:06
  • you are welcome , for the menu I try to do't but I don't found away to get the selected tab , so I got to that way I mention in the answer is just an easy one – Muhammed Albarmavi Aug 10 '20 at 13:08