CODEWITHSUNDEEP
arraysjsonangulardynamictranslate
BlueCat
BlueCat

Reputation: 763

Translate dynamic values with angular 5

I have a json translation file for english and one for german.

They look like this

en.json

"COLORS": {
        "BLUE": "Blue",
        "RED": "Red",
        "GREEN": "Green"
}

same for the german one.

I have a person object and this has an array colors []. A person could have the colors blue and red. Then it would look like this:

person.colors[0] = "BLUE";
person.colors[1] = "RED";

As you can see, I saved the keys of the translations in the array and not the values.

Now I'm looping through the person's colors like:

<div *ngFor="let color of person.colors">
    <p>{{'COLORS.color' | translate}}</p>
</div>

But I'm getting no output. What could be the problem?

I already looked at this post angular-translate: Translate dynamic value but it didn't help me.

Upvotes: 1

Views: 1768

Answers (1)

jack
jack

Reputation: 609

Try This way

<div *ngFor="let color of person.colors">
    <p>{{'COLORS.'+color | translate}}</p>
</div>

Upvotes: 2

Related Questions