Using Renderer for i18n?

Question

I recently read a very interesting article from @yearofmoo about Angular2 Renderer. This gave me an idea of ​​what i18n can do with Renderer . Mostly use this function:

createText(parentElement: any, value: string): any { // this is called for every text node in the template } 

and just convert the value by translating it into another language:

 let es = { "Hello": "Hola" } value = "Hello" value = es[value] 

I looked briefly at issues and design documents , but before going down to this rabbit hole, I wanted to check if anyone had any experience with this.

Are there any problems that could prevent this from working? Any irregularities in the way that I don’t know about? Opinions about this approach?

Answer 1

We use Renderer to set the translation provided by the attribute.

 import { Directive, ElementRef, Input, Renderer, OnInit} from '@angular/core'; import { TranslateService } from './translate.service'; @Directive({ selector: '[translate]' }) export class TranslateDirective implements OnInit{ @Input() translate :string; constructor(private el: ElementRef, private renderer: Renderer, private _translateService : TranslateService) {} ngOnInit(): void { this.renderer.setText(this.el.nativeElement,this._translateService.instant(this.translate)); } } 

See plunker for a demo

Hope this is what you are looking for.