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({
  selector: 'radio-group',
  templateUrl: 
           `<div *ngFor="let item of items">
                 <label for="input_{{item}}">{{item}}</label>
                 <input type="radio" id="input_{{item}}" value="{{item}}" [formControl]="radioControl">
           </div>`,
  styleUrls: ['./radio-group.component.scss']
})
export class RadioGroupComponent {
    @Input()
    items: string[];
    @Input()
    radioControl: FormControl;
}

I need the radio group labels internationalized.
The official i18n documentation of Angular talks only about static HTML.

Is there any way to internationalize dynamic components (like *ngFor entries) with i18n template translation?

I'm aware of ngx-translate way, I'm interested particularly in i18n way.

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);
}

Answer 2

In Angular 9 you can use global $localize function like this:

$localize`String to translate`

Great article on this: https://blog.ninja-squad.com/2019/12/10/angular-localize/