angular2 template - String interpolation inside innerHTML in angular 2

Question

How can I render an expression inside an [innerHTML] directive:

public stringInterpolation: string = 'title';
public data: any = '<a>{{stringInterpolation}}</a>';

<div [innerHTML]="data"></div>

String interpolation is being rendered as text not the exact value.

Logic behind this is I am using a reusable table and I want a configuration where in I can specify a template that will be generated inside a cell rather than listing all data as text.

Answer 1

You can use TypeScript interpolation. Angular bindings aren't supported in dynamically added HTML:

public data: any = `<a>${stringInterpolation}</a>`;