Para darle solución al problema que me lo generaba el <p-tabView>
hice lo siguiente
En el archivo principal.component.html
cree una estructura parecida a esta
<p-card>
<div class="card_acciones">
<div class="button_group">
<button
#buttonUno
pButton
pRipple
type="button"
label="Uno"
class="button_active"
(click)="selectOption(0)"
></button>
<button
#buttonDos
pButton
pRipple
type="button"
label="Dos"
(click)="selectOption(1)"
></button>
<button
#buttonTres
pButton
pRipple
type="button"
label="Tres"
(click)="selectOption(2)"
></button>
<button
#buttonCuatro
pButton
pRipple
type="button"
label="Cuatro"
(click)="selectOption(3)"
></button>
</div>
</div>
<div></div>
</p-card>
<p-card>
@if(activeIndex==0){
<componente-hijo-uno></componente-hijo-uno>
}
@if(activeIndex == 1){
<componente-hijo-dos></componente-hijo-dos>
}
@if(activeIndex ==2){
<componente-hijo-tres></componente-hijo-tres>
}
@if(activeIndex ==3){
<app-calendar></app-calendar>
}
</p-card>
En uno de los activeIndex uso el componente hijo calendar
en el archivo principal.component.css
use:
button.button_active {
border-bottom: 1px solid var(--surface-500) !important;
}
para simular que estaba activa esa pestaña como en el <p-tabView>
En el archivo principal.component.ts
declaré
@ViewChild('buttonUno') buttonAntecedentes!: ElementRef
@ViewChild('buttonDos') buttonHistorial!: ElementRef
@ViewChild('buttonTres') buttonRegisterDate!: ElementRef
@ViewChild('buttonCuatro') buttonEvolucion!: ElementRef
activeIndex!: number
//hice este metodo
selectOption(option: number) {
this.activeIndex = option
this.buttonUno.nativeElement.classList.remove('button_active')
this.buttonDos.nativeElement.classList.remove('button_active')
this.buttonTres.nativeElement.classList.remove('button_active')
this.buttonCuatro.nativeElement.classList.remove('button_active')
if (option === 0) {
this.buttonUno.nativeElement.classList.add('button_active')
return
}
if (option === 1) {
this.buttonDos.nativeElement.classList.add('button_active')
return
}
if (option === 2) {
this.buttonTres.nativeElement.classList.add('button_active')
return
}
if (option === 3) {
this.buttonCuatro.nativeElement.classList.add('button_active')
return
}
}
Con esta lógica logré simular el comportamiento del TabView
.