I've been looking into how to use i18n for translations in an Angular app. My struggle is with string interpolation, it seems this has not been implemented into Angular yet.
Goal: Use i18n to translate string interpolation of collection in an Angular app to have a Spanish version.
What I've done: I've been doing a lot of research, and the workarounds I've seen mentioned are:
Polyfill: ( https://github.com/ngx-translate/i18n-polyfill ) (and referenced here: angular-i18n Angular 6 Internationalisation : How to deal with variables )
Hidden div: (Angular internationalization (i18n) and *ngFor )
Verbose method: using n-container and ngswitch. Seems the least clean way: https://github.com/angular/angular/issues/11405#issuecomment-415731284
For a collection like an array, or a database table, how are these workarounds creating separate i18n tags for each element? Will it end up showing just one tag for all elements of the collection?
For example: If you have an array for "Gender", with values of "Male" and "Female", what will happen?
<mat-option *ngFor="let gender of genders" [value]="gender.value">
{{ gender.viewVal }}
</mat-option>
In the polyfill they mention:
test {{myVar}} !", {myVar: "^_^"})
Does that mean "^_^" is the translation? It's done directly in the typescript, not in an xlf file? If you use a hidden div, how does using the typescript file affect the xlf? The verbose method seems easiest to understand but not good for scalable, what if you have a dropdown with 10+ items, then that really bulks up the code.
What is the best way to go about this goal? I'm not sure I properly understand how the polyfill works and there is not much documentation on these ways of translation.
