translate attribute values with ngx-translate angular

Question

I am trying to use ngx-translate for attribute values like p-messages text, p-column header, p-tabPanel header

<p-message text="text"></p-message>

<p-column header="text"></p-column>

<p-tabPanel header="text">

I tried the following but it doesn't work:

<p-tabPanel header="'key' | translate">

<p-tabPanel header="{{'key' | translate}}">

<p-tabPanel [attr.header]="'key' | translate">

Is there any way to use ngx-translate for these?

Answer 1

From this github issue

<img src="image.jpg" [attr.alt]="'key' | translate"> or like this:
<input placeholder="{{'key' | translate}}">

Answer 2

The following solution worked:

 <p-tabPanel header="{{'key' | translate}}">

But be very careful to import TranslateModule in the needed module.