'Angular PrimeNG p-dialog with tabs

I am using primeng to create a dialog with tabs, this is my template:

<p-dialog [(visible)]="displayDialog" (onHide)="cancel()" [style]="{width: '50vw'}" [baseZIndex]="10000">
  <p-tabView [controlClose]="displayDialog">
    <p-tabPanel header="Header 1" [headerStyle]='{"width": "70px"}'>Text 1</p-tabPanel>
    <p-tabPanel header="Header 2" [headerStyle]='{"width": "70px"}'> Text 2</p-tabPanel>
    <p-tabPanel header="Header 3" [headerStyle]='{"width": "70px"}'>Tex 3</p-tabPanel>
  </p-tabView>
</p-dialog>

I get this as a result

enter image description here

However, I would like to have it like Angular Material: (matDialog)

enter image description here

<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

Is there a way to have it like Angular Material using PrimeNG?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source