Angular2 - select json value to replace value in html template

Question

New to angular2, having problems with setting values ​​from the Footer [] array and displaying it.

footer.component.ts:

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: `<html-outlet [html]="footerValue"></html-outlet>`,
})
export class FooterComponent{
    foot = FOOTER;

    footerValue = `<div class="menu" *ngFor="let f of foot" >
                <div class="footer"><b>{{f.value}} @2016</b></div>
            </div>`;
}

Sinept:

template:`<html-outlet [html]="footerValue"></html-outlet>`,

takes a template from "footerValue" and sends it to another function to dynamically compile and load html.

Everything works well if it is passed directly as:

template: `<div class="menu" *ngFor="let f of foot" >
                <div class="footer"><b>{{f.value}} @2016</b></div>
            </div>`,

Can someone help me add the values ​​from the array to the string variable 'footerValue' to follow my original functions in order to generate html dynamically.

Original html template:

`<div class="menu" *ngFor="let f of foot" >
                <div class="footer"><b>Example @2016</b></div>
            </div>`

where "Example" should be replaced with a value from the array.

Answer 1

, , html-outlet "" html-, , foot .

, html- :

constructor() {
   this.footerValue = this.prepareFooterHtml();
}

prepareFooterHtml(): string {
   let footer = '<div class="menu">';
   this.foot.forEach(f => {
      footer += `<div class="footer"><b>${f.value} @2016</b></div>`;
   });
   footer += '</div>';
   return footer;
}