Translating data-bound text in Angular 2 with i18n

Question

When I attempt to translate English to French using i18n everything works dandy when following the Internationalization tutorial at https://angular.io/docs/ts/latest/cookbook/i18n.html word for word.

But the moment I attempt to use Angular 2's data-binding to insert variable text into the HTML it quits working.

Here is my HTML:

<h1 i18n="User welcome|An introduction header for this sample">{{value}}</h1>

Here is my component:

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'my-app',
  templateUrl: 'app.component.html'
})
export class AppComponent { 
  public value = "Hello i18n!";
}

Here is my XLF file:

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file source-language="en" datatype="plaintext" original="ng2.template">
   <body>
     <trans-unit id="af2ccf4b5dba59616e92cf1531505af02da8f6d2"   datatype="html">
       <source>Hello i18n!</source>
       <target>Bonjour i18n!</target>
       <note priority="1" from="description">An introduction header for this sample</note>
       <note priority="1" from="meaning">User welcome</note>
     </trans-unit>
   </body>
 </file>
</xliff>

Here is the error:

zone.js@0.6.25:357 Error: Uncaught (in promise): Error: Template parse errors: Translation unavailable for message id="95184d0fe43359bff724d20df3a1317aef86799c" ("[ERROR ->]{{value}}

Answer 1

You cannot currently translate strings at run-time. It's pre-processed to deliver the translated strings in the html. It would be nice if Angular would provide a pipe to use the .xlf translations for bound string variables. Seems like a pretty big gap to me.

Here's a plunker to illustrate the problem.

Answer 2

Here is functional example of that what you are trying to achieve: plnkr link

Looks like you have to set up document locale, and a little bit extra code for fetching the proper localisation in app/i18n-providers.ts

Translating data-bound text in Angular 2 with i18n

Question

2 answers

solution1
6 ACCPTED 2016-12-01 15:53:01

solution2
0 2016-11-13 23:17:20

Translating data-bound text in Angular 2 with i18n

Question

2 answers

solution1 6 ACCPTED 2016-12-01 15:53:01

solution2 0 2016-11-13 23:17:20

solution1
6 ACCPTED 2016-12-01 15:53:01

solution2
0 2016-11-13 23:17:20