ed-tester ed-tester - 1 day ago 5
Javascript Question

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:


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



Answer

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.

Comments