Primeng TabView add content after tabs - html

Question

I need to have 2/3 tabs, but in the end and on the same line, I need to add buttons, custom component etc etc ...
I didn't found a way to do it, and there is no responses when googling :-o
<p-tabView>
<p-tabPanel header="Header 1">
Content 1
</p-tabPanel>
<p-tabPanel header="Header 2">
Content 2
</p-tabPanel>
<p-tabPanel header="Header 3">
Content 3
</p-tabPanel>
<!-- here start my custom html - without tabs content -->
<p-tabPanel>
<button></button>
<app-my-custom-component></app-my-custom-component>
</p-tabPanel>
</p-tabView>
Here an example of what I need.
On the same line, I want to add custom html, and when I click on it, there is no tab, but other actions ... like dialog for example

Answer 1

Try this:
<p-tabView>
<p-tabPanel header="Header 1"> Content 1 </p-tabPanel>
<p-tabPanel header="Header 2"> Content 2 </p-tabPanel>
<p-tabPanel header="Header 3"> Content 3 </p-tabPanel>
<!-- here start my custom html - without tabs content -->
<p-tabPanel>
<ng-template pTemplate="header">
<p-button icon="pi pi-chevron-up" (click)="openPrev()">
</p-button>
</ng-template>
</p-tabPanel>
<p-tabPanel>
<ng-template pTemplate="header">
<app-my-custom-component></app-my-custom-component>
</ng-template>
</p-tabPanel>
</p-tabView>

Answer 2

In addition to this answer.
To prevent the content from opening and only trigger the button action, try this:
Add $event.stopPropagation() to the button (click) method:
<button pButton type="button" label="Action button"
(click)="performRequiredAction();$event.stopPropagation();" >
</button>
Using CSS, disable clicking on the parent element, which is the tab, and enable it for the child button:
:host ::ng-deep {
.p-tabview-nav-link:has(button){
pointer-events: none;
button {
pointer-events: all;
}
/* Additional styling for a better button look */
border: none !important;
padding: 0 4px !important;
height: 100%;
align-items: center;
}
}