title: Angular 8 i18n translate dynamic variable
body: <p>I have in my <code>app.component.html</code> an  element that is on every page:</p>
  
  <p><code>&lt;h1 i18n="@@titleH1"&gt;{{title}}&lt;/h1&gt;</code></p>
  
  <p>I have a shared service that has a setters and getters:</p>
  
  <pre><code>...
  title = new BehaviorSubject('Initial Title');
  
  setTitle(title: string) {
  this.title.next(title);
  }
  ...
  </code></pre>
  
  <p><strong>app.component.ts: <code>ngOnInit</code></strong></p>
  
  <pre><code>...
  this.sharedService.title.subscribe(updateTitle =&gt; this.title = updateTitle);
  this.sharedService.setTitle('Dashboard');
  ...`
  </code></pre>
  
  <p><strong>product.component.ts: <code>ngOnInit</code></strong> </p>
  
  <pre><code>...
  this.sharedService.title.subscribe(updateTitle =&gt; this.title = updateTitle);
  this.sharedService.setTitle('Product');
  ...
  </code></pre>
  
  <p>When navigate to /dashboard I get Dashboard  in the  when I navigate to /product I get Product in the  which is cool.</p>
  
  <p>How can I translate Dashboard and Product Dinamically as {{title}} will change according to the page.</p>
  
  <p>my <code>xlf</code> produced this:</p>
  
  <pre><code>     ... 
       &lt;trans-unit id="titleH1" datatype="html"&gt;
          &lt;source&gt;&lt;x id="INTERPOLATION" equiv-text="{{title}}"/&gt;&lt;/source&gt;
          &lt;target&gt;&lt;x id="INTERPOLATION" equiv-text="{{title}}"/&gt;&lt;/target&gt;
          &lt;context-group purpose="location"&gt;
            &lt;context context-type="sourcefile"&gt;src/app/app.component.html&lt;/context&gt;
            &lt;context context-type="linenumber"&gt;17&lt;/context&gt;
          &lt;/context-group&gt;
        &lt;/trans-unit&gt;
        ...
  </code></pre>
  
  <p>and I added the target tag but not sure how this fit into translation.</p>
  
  <p>Any Ideas. Thanks</p>