Changing the name of a tab within a p-tabview

Setting up a p-tabview with tabs containing specific content involves the following code:

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

To allow users to rename the tabs in the tab header, I have considered two options:

  1. Implement a context menu (right mouse click) on the tabs with a "rename" option that opens a dialogue box for entering a new tab name.
  2. Add a rightIcon next to the tab text, like an edit icon, which when clicked will prompt the user to enter a new name in a dialogue box.

I am unsure if such functionalities are supported by p-tabview. If they are, please provide guidance on how to incorporate them.

cssangulartypescriptprimengprimeng-turbotable

Answer №1

One way to customize tab headers is by adding a button to show a dialog for renaming the header. In this example, an array of objects represents tab headers 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 contains a textbox for changing 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 
  }

Check out the demo 🚀

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vue3 TypeScript may potentially have an object that is 'undefined'

This piece of code is Vue3 with TypeScript-based. export interface TenantDto { uuid: string; name: string; } export const useTenantStore = defineStore('tenant', { state: () => ({ tenants: [], }), actions: { setMyTenants: (pa ...

javascripttypescriptvue.jsvuejs3pinia

Full-Width Bootstrap Sticky Containerized

I am trying to create a sticky sidebar that fills the full width of the container in Bootstrap 4. I have written the code below, and while the sticky functionality works perfectly, the sidebar does not span the full width of the container. Can someone pl ...

cssbootstrap-4

Issue with Bootstrap 4 columns overlapping upon screen resizing

Whenever I use a row with 4 columns within a container that has 3 columns, the text file overlaps with the column containing an image when the screen size is reduced or viewed on an iPhone. Take a look at the code snippet and screen capture provided below ...

htmlcsstwitter-bootstrapbootstrap-4

Spinning html/css content using JavaScript

Greetings! I am currently working on a demo site using just HTML, CSS, and JavaScript. Typically, I would use Ruby and render partials to handle this issue, but I wanted to challenge myself with JavaScript practice. So far, I have created a code block that ...

javascripthtmlcss

Shifting the position of an HTML page to one direction

I'm currently working on adding a sidebar to my Twitter Bootstrap 3 project. The goal is to have a fixed positioned nav nav-pills nav-stacked show up on the left side of the page when a button is clicked. I've set its z-index to 1000 so it appear ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to activate a click event when I set a radio button to checked?

I am facing an issue with an uninitialized property in my app.component.ts: color!:string; I am trying to automatically initialize the color property when a radio button is selected: <div> <input type="radio" name="colors" ( ...

javascripthtmlangular

When a file is modified in Angular, it triggers an error prompting the need to restart the 'npm' service

Whenever I make changes to a file in my Angular application, I encounter the following error: ERROR in ./src/app/@theme/components/auth/index.js Module build failed: Error: ENOENT: no such file or directory, open 'C:\Dev\Ng\ngx-a ...

node.jsangulartypescriptnpm

updating a value in a svelte writable store using cypress

Inside my Svelte application, I am working with a boolean variable. import { writable } from 'svelte/store' export const authorised = writable(false) This variable is imported into App.svelte and other Svelte files, where it can be accessed and ...

typescriptcypresssvelte

Looking for someone to break down this Typescript code snippet for me

As a Javascript developer, I am currently diving into an unfamiliar TypeScript code block within a project. Here is the code snippet: ViewModel newPropertyAddress = new ViewModel(){name, previousPro = oldValue } ...

javascripttypescript

What are the best ways to improve the efficiency of my filtering function

Currently, I'm working on a project involving Angular, NestJS, GraphQL, and MongoDB. I have created a modal component for filtering data that contains multiple fields. However, I am not confident that the code I wrote follows best practices and am see ...

node.jsangularmongodbnestjsfiltering

Travis build unsuccessful due to version inconsistencies

I am facing an issue where my locally working application is failing to build on TravisCI. After some research, I realized that I used "latest" as the version for dependencies in my package.json file. :rekolekcje-webapp:npmInstallnpm WARN deprecated <a ...

angulartravis-ci

What is the best way to update a CSS href using window.open with JavaScript?

I am trying to dynamically change the CSS href by using window.open in JavaScript. <a class="cssButton" id="Launch" target="_blank" data-baseref="Example/index.html?" href="Example/index.html?" >Launch Example</a> I want to transform it into: ...

javascripthtmlcss

The function window.scrollBy seems to be causing a conflict with jjmslideshow, resulting in the page being unable to

I wrote a simple script to create a "smooth scroll" effect when a specific link is clicked: (function() { 'use strict'; // Checking for compatibility if ( 'querySelector' in document && 'addEventListener' in window ...

javascriptjqueryhtmlcss

Troubleshooting problem with div width in Outlook causing table cell padding issue for curved corners on another div

This question has significantly evolved following additional testing I am using a table layout similar to this: <table> <tr> <td></td> <td style="padding:10px 3%;"> <div border="2px solid #000000;"> ...

htmlcssoutlookhtml-email

Elements that possess identical class attributes yet exhibit dynamic behavior

I'm currently facing challenges with dynamically generated elements. I am working on a page for my website that will show a list of users (data provided by the controller). Each user is represented within a div, containing two h3 tags displaying the u ...

javascriptjqueryhtmlcss

Having trouble getting undefined values for keys while attempting to retrieve all the data from Firebase DB with Angular

Currently, I have code that is fetching records from the Firebase database using both Angular and Ionic. The code functions properly, but it does not provide me with the keys for each record. Instead, it returns 'undefined'. I have researched s ...

angulartypescriptfirebasefirebase-realtime-databaseionic3

Combining and arranging numerous items in a precise location in three.js

I am currently working on a web application using three.js with Angular and facing some challenges when trying to set the precise positions of objects. The requirement is to load various objects and position them in specific locations. In order to load di ...

javascriptangularthree.jsdom-events

Adjust the appearance of self and other classes on hover using CSS

I'm looking for a way to use the :hover effect in CSS to change the font color of one class (.footer_status_tex) and the background color of another class (.footer_status_gear). Here's a simplified version of what I have in mind: CSS .footer_s ...

csshover

Utilize/Absolve/Add a Prefix to angular material scss styles

Issue I am facing a challenge with integrating angular material SCSS into my application. I want to ensure that these styles are isolated and scoped specifically for my application, as it will be embedded within a larger monolith. The goal is to prevent a ...

cssangularsassangular-material

Iterate over Observable data, add to an array, and showcase all outcomes from the array in typescript

Is there a way to iterate through the data I've subscribed to as an Observable, store it in an array, and then display the entire dataset from the array rather than just page by page? Currently, my code only shows data from each individual "page" but ...

javascripthtmlangularhttptypescript