title: Angular2 - fetch json value to replace value into html template
body: <p>New to angular2, having problems infetching the value from the Footer[] array and display it.</p>
  
  <h2><strong>footer.component.ts:</strong></h2>
  
  <pre><code>import { Component } from '@angular/core';
  
  export class Footer {
    id: number;
    value: string;
  }
  
  const FOOTER : Footer[] = [
      {id: 1, value: 'value_one'},
      {id: 2, value: 'value_two'}
    ];
  
  @Component({
      selector: 'footer',
      template: `&lt;html-outlet [html]="footerValue"&gt;&lt;/html-outlet&gt;`,
  })
  export class FooterComponent{
      foot = FOOTER;
  
      footerValue = `&lt;div class="menu" *ngFor="let f of foot" &gt;
                  &lt;div class="footer"&gt;&lt;b&gt;{{f.value}} @2016&lt;/b&gt;&lt;/div&gt;
              &lt;/div&gt;`;
  }
  </code></pre>
  
  <p>The sinnept:</p>
  
  <pre><code>template:`&lt;html-outlet [html]="footerValue"&gt;&lt;/html-outlet&gt;`,
  </code></pre>
  
  <p>takes the template from 'footerValue' and sends to another function for compiling and loading the html dynamically. </p>
  
  <p>All works well if its passed directly as:</p>
  
  <pre><code>template: `&lt;div class="menu" *ngFor="let f of foot" &gt;
                  &lt;div class="footer"&gt;&lt;b&gt;{{f.value}} @2016&lt;/b&gt;&lt;/div&gt;
              &lt;/div&gt;`,
  </code></pre>
  
  <p>Can someone guide me how to append the values from the array to the string variable 'footerValue', to follow my original functionality to generate the html dinamically.</p>
  
  <p>Original html template is :</p>
  
  <pre><code>`&lt;div class="menu" *ngFor="let f of foot" &gt;
                  &lt;div class="footer"&gt;&lt;b&gt;Example @2016&lt;/b&gt;&lt;/div&gt;
              &lt;/div&gt;`
  </code></pre>
  
  <p>where the 'Example' should get replaced with value from the array.</p>