Angular internationalization (i18n) and *ngFor

Question

I have a simple generic component in Angular which receives a list of strings and creates a radio group for these strings:

@Component({
  sele         


        

Answer 1

I was looking for the very same thing and also for an option to do dynamic translation without ngx-translate. ocombe seems to be the one responible for i18n at Angular. In this GitHub issue #16477 he posted some kind of roadmap for i18n in Angular.

▢ Use translation strings outside of a template - #11405 [blocked by runtime i18n]

As you can see this feature is not implemented in Angular yet but it's planned. The issue that is blocking this feature luckily is in progress:

▢ Runtime i18n (one bundle for all locales with AOT) - [working on it]

I don't remember where I read it but I think ocombe wrote, they want to implement this feature still in Angular 5 so it might be available before spring 2018 (the Angular roadmap says Angular 6 will be published in spring 2018)

Date: March/April 2018; Stable Release: 6.0.0

ocombe just posted this today:

I'm not the one working on this feature, and it's the holidays break, I'll let you know as soon as I know more

So all that remains is to use ngx-translate if you cannot wait, or you could subscribe to these GitHub issues #11405 & #16477 and get updated until they make this feature available. Hopefully early 2018 :)

PS: as far as I understood they also want to implement dynamic translation, but I think it wont be available before Angular 6.

UPDATE:

Now it's official: Runtime i18n wont be before Angular 6 (see: 11405#issuecomment-358449205)

EDIT:
I found a dirty hack to do that. you can create hidden div tags for your translations and save them via ViewChildren in a map for further use. You could even subscribe to the elements to update them.

@ViewChildren('test') myChildren; // the class needs to implement AfterViewInit
myMap = new Map();
ngAfterViewInit() {
  this.myChildren.forEach(value => this.myMap.set(value.nativeElement.getAttribute('name'), value.nativeElement.innerHTML));
  console.log(this.myMap);
}