title: Translating data-bound text in Angular 2 with i18n
body: <p>When I attempt to translate English to French using i18n everything works dandy when following the Internationalization tutorial at <a href="https://angular.io/docs/ts/latest/cookbook/i18n.html" rel="nofollow noreferrer">https://angular.io/docs/ts/latest/cookbook/i18n.html</a> word for word.</p>
  
  <p><strong>But</strong> the moment I attempt to use Angular 2's data-binding to insert variable text into the HTML it quits working.  </p>
  
  <p>Here is my HTML:</p>
  
  <p><code>&lt;h1 i18n="User welcome|An introduction header for this sample"&gt;{{value}}&lt;/h1&gt;</code></p>
  
  <p>Here is my component:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.html'
  })
  export class AppComponent { 
    public value = "Hello i18n!";
  }
  </code></pre>
  
  <p>Here is my XLF file:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8" ?&gt;
  &lt;xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2"&gt;
   &lt;file source-language="en" datatype="plaintext" original="ng2.template"&gt;
     &lt;body&gt;
       &lt;trans-unit id="af2ccf4b5dba59616e92cf1531505af02da8f6d2"   datatype="html"&gt;
         &lt;source&gt;Hello i18n!&lt;/source&gt;
         &lt;target&gt;Bonjour i18n!&lt;/target&gt;
         &lt;note priority="1" from="description"&gt;An introduction header for this sample&lt;/note&gt;
         &lt;note priority="1" from="meaning"&gt;User welcome&lt;/note&gt;
       &lt;/trans-unit&gt;
     &lt;/body&gt;
   &lt;/file&gt;
  &lt;/xliff&gt;
  </code></pre>
  
  <p>Here is the error:</p>
  
  <blockquote>
    <p>zone.js@0.6.25:357 Error: Uncaught (in promise): Error: Template parse
    errors:
        Translation unavailable for message id="95184d0fe43359bff724d20df3a1317aef86799c" 
        ("[ERROR ->]{{value}}</p>
  </blockquote>
  
  <p>