Tabview : dynamic header is not updated

[JordanSagnes]

[x] bug report => Search github for a similar issue or PR before submitting

Plunkr Case (Bug Reports)
Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewd in detail and assisted.

code : https://stackblitz.com/edit/github-7jjko1?file=src/app/app.component.html
application : https://github-7jjko1.stackblitz.io

Current behavior
For a tabview component, the header is not updated after a change (like increment a counter)

Expected behavior
After increment a counter, my tabview header is automatically updated

Minimal reproduction of the problem with instructions

• click on the button to increment counter
• there is no change, you need to click on the tabview to refresh its header

Please tell us about your environment:
Ubuntu or windows
On intellij or VScode
angular 10 with primeng 10.0.3
Chrome

• Angular version:
  Angular 10

• PrimeNG version:
  Primeng 10.0.3

• Browser: all

• Language: ES6/7

[Brutus5000]

I ran into the same issue and since I'm using dynamic translations my TabPanels show completely empty.
Any known workarounds for this?

Also seems to be related to #9475

[JordanSagnes]

I ran into the same issue and since I'm using dynamic translations my TabPanels show completely empty.
Any known workarounds for this?

Also seems to be related to #9475

Hi @Brutus5000,
For me, is not a fix but you can do this :
You can replace :

<p-tabView>
  <p-tabPanel [header]="'my.path' | translate">
     <!-- content -->
  </p-tabPanel>
</p-tabview>

by :

<p-tabView>
  <p-tabPanel>
     <ng-template pTemplate="header">
        {{ 'my.path' | translate }}
     </ng-template>
     <!-- content -->
  </p-tabPanel>
</p-tabview>

[Brutus5000]

@JordanSagnes Thank you very much. Works flawless. ❤️

[CKinAims]

Can confirm this is still an issue. Similar environment to JordanSagnes, but I just updated to v11.0.0-rc.1 and use typescript.

My issue is somewhat similar to Brutus5000 in that I am trying to translate the header. I am using a directive that calls a service to retrieve the translation from the server and then update the tabPanel.header. The header remains blank in the browser until selected then updates to show the value received from the server.

I tried the pipe + template approach JordanSagnes recommended, but with that the header remains empty.

[jacqueslareau]

Can confirm this behavior with ngx-translate. The fix using the template seems to be working.

[yigitfindikli]

Unable to replicate with PrimeNG 11.3.1, if the issue persists please create a new ticket with a test case reproducing the issue e.g. stackblitz or a github repo and it will be reviewed by our team once again. You can check at https://stackblitz.com/edit/github-7jjko1-du5ymt

[XwolfY]

I ran into the same issue and since I'm using dynamic translations my TabPanels show completely empty.
Any known workarounds for this?
Also seems to be related to #9475

Hi @Brutus5000, For me, is not a fix but you can do this : You can replace :

<p-tabView>
  <p-tabPanel [header]="'my.path' | translate">
     <!-- content -->
  </p-tabPanel>
</p-tabview>

by :

<p-tabView>
  <p-tabPanel>
     <ng-template pTemplate="header">
        {{ 'my.path' | translate }}
     </ng-template>
     <!-- content -->
  </p-tabPanel>
</p-tabview>

You save my day, thanks a lot !!!