title: Angular, how parse template from string and pass current context variables
body: <p>I making a simple component to create tables:</p>
  
  <pre><code>@Component({
    selector: 'admin-table',
    template: `
      &lt;table class='table table-bordered'&gt;
        &lt;thead&gt;
        &lt;th *ngFor='let column of columns'&gt;
          {{ column.label }}
        &lt;/th&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
        &lt;tr *ngFor="let record of records"&gt;
          &lt;td *ngFor='let column of columns' [innerHTML]="fieldContent(column, record) | safeHtml"&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    `,
  })
  export class AdminTableComponent {
  
    @Input() columns: AdminTableColumn[];
  
    @Input() records: {}[];
  
    fieldContent(column: AdminTableColumn, record: {}) {
      if (column.template) {
        //TODO: parse the template and pass current record as argument
        return column.template;
      }
  
      return record[column.field];
    }
  }
  </code></pre>
  
  <p>and other component to create a table of products using the above component</p>
  
  <pre><code>@Component({
    selector: 'product-admin',
    template: `
      &lt;h1&gt;Products&lt;/h1&gt;
      &lt;admin-table [columns]="columns" [records]="products"&gt;&lt;/admin-table&gt;
    `,
    providers: [ProductService],
  })
  export class ProductAdminComponent implements OnInit {
  
    products: Product[];
  
    columns: AdminTableColumn[] = [
      {
        field: 'id',
        label: 'SKU',
      },
      {
        field: 'name',
        label: 'Name',
        template: '&lt;strong&gt;{{record.name}}&lt;/strong&gt;',
      }
    ];
  }
  </code></pre>
  
  <p>Like you can see the <code>AdminTableColumn</code> has a additional option called <code>template</code> to set the value of the cell using a template. But I can't do this when try to render the value I got <code>{{record.name}}</code> instead of the real product name.</p>
  
  <p>I need parse the value entered in the <code>template</code> option to allow the use of angular declarations like: <code>{{record.name}}</code> or <code>&lt;some-component [title]="record.name"&gt;&lt;/some-component</code>> in order to create a rich table.</p>
  
  <p>in other words, exists something like <code>render(template, { record: record })</code></p>