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

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 }}"

[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.