Core: Question: How to dynamically construct translation keys for input field placeholder attributes?

[SebastianSchirmer]

I'm submitting a ... (check one with "x")

[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[x] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior
For a long form I am generating input fields dynamically using an ngFor loop and would like to translate field labels and placeholders dynamically. For this I am trying to generate the translation keys dynamically. My current attempt in html code looks like this:

<div *ngFor="let field of componentFormFields">
    <ion-item>
        <ion-label stacked translate>bike-passport.label.{{ field.key }}</ion-label>
        <ion-input type="{{ field.type }}"
                 formControlName="{{ field.key }}"
                 placeholder="{{ 'bike-passport.label.{{ field.key }}' | translate }}"></ion-input>
    </ion-item>
</div>

I am trying to interpolate the "field.key" property to construct the appropriate translation key which works fine for the ion-label element above. An example for a generated key would be "bike-passport.label.manufacturer". Of course, the above doesn't work for the placeholder attribute as I am not using the translate directive as I am doing for the ion-label element.

Therefore I'd like to kindly ask if anyone knows a way to accomplish what I am trying to do, which is to dynamically construct the translation key for the placeholder attribute, e.g. "bike-passport.label.manufacturer".

Thanks very much in advance for any feedback.

Please tell us about your environment:

• ngx-translate version: 6.0.1

• Angular version: 4.1.0

• Browser: all

[tsvetan-ganev]

Simple string concatenation should do the trick:
placeholder="{{ ('bike-passport.label' + field.key) | translate }}"

[SebastianSchirmer]

@tsvetan-ganev Awesome, works like a charm, thanks very much!

[eyerean]

I think this should be added to the documentation. Even though it's more of an Angular thing, it would help a lot newcomers.

[Abhishek-Kanitkar]

Dear @tsvetan-ganev ,

As per your comment above "Simple string con ..." placeholder is a component variable which will get assigned to 'placeholder' input field attribute right ?

[tsvetan-ganev]

@Abhishek-Kanitkar,
placeholder= - this is a HTML attribute
'bike-passport.label' - this is a string
field.key - this is a variable coming from the component

This is the same example written in a clearer context:

<input type="text" placeholder="{{ ('bike-passport.label' + field.key) | translate }}" />

[LPCmedia]

This does not work in my case when using inside of an ngFor and binding to a component input.

  <panel-menu-group 
    *ngFor="let nav of launcherNav$ | async"
    label="{{ nav.labelKey | translate }}"
    [isSelected]="nav.isSelected"
    [isDisabled]="nav.isDisabled">
  </panel-menu-group>

[Jahrenski]

Necro posting to answer @LPCmedia :
you can trick it by using this form instead:
<panel-menu-group *ngFor="let nav of launcherNav$ | async" label="{{ '' + nav.labelKey | translate }}" [isSelected]="nav.isSelected" [isDisabled]="nav.isDisabled"> </panel-menu-group>

[JGeraldoLima]

Just to let anyone who is facing the same problem, @tsvetan-ganev answer also helps when you have
to define the translate key dynamically, like:
[placeholder]="(simpleRangeMode ? 'TXT_RANGE_METERS_PLACEHOLDER' : 'TXT_RANGE_DECIBELS_PLACEHOLDER') | translate"

For some reason, the expression only works when using parenthesis.

[chetan096]

Simple string concatenation should do the trick:
`placeholder="{{ ('bike-passport.label' + field.key) | translate }}

Thanks fo the solution.

[coolduebtn]

Simple string concatenation should do the trick:
placeholder="{{ ('bike-passport.label' + field.key) | translate }}"

it worked like a charm. thanks so much