I am trying to figure out if it is possible to change language for a dynamic content using i18n and related libraries like (ngx-translate) for which I am doing a POC.
I am able to translate the static content but I am not able to figure out how to do the same for dynamic content, like, content in ngfor loop or data coming from the server.
Is there any way to do the conversion for content coming from the backend/db?
or any other advice/suggestions would be really appreciated.
Any content that matches a key in your translation files would do. So if your backend gives you such keys, you can just use translate:
<div *ngFor="let key of keys">
<p translate>{{key}}</p>
</div>Or something like that. If this is what you meant?
This is fairly simple, provided you know the values your backend may deliver:
// backend data returns known possible values:
const values = ['red', 'blue', 'green']
// de.json
color: {
"red": "Rot",
"blue": "Blau",
"green": "Grün"
}
// app.component.html
<div *ngFor="let value of values">
{{ ('color.' + value) | translate }}
</div>