CODEWITHSUNDEEP
javascriptangulardata-bindinginternationalization
ed-tester
ed-tester

Reputation: 1656

Translating data-bound text in Angular 2 with i18n

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:

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

Upvotes: 5

Views: 3671

Answers (2)

Dralac
Dralac

Reputation: 199

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

Upvotes: 0

user7237102
user7237102

Reputation: 76

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.

Upvotes: 6

Related Questions