I need to render some HTML I recibe from back. Something like this:
<strong> Item label: {{item.label}}</strong>
I try to do it with:
<div [innerHTML]="html"></div>
But its render:
Item label: {{item.label}}
But I have the item object
item = {
label : 'Label from item' }
And I need to be render
Item label: Label from item
I create an example:
@Component({
selector: 'app-component',
template: '<div [innerHtml]="html" ></div>',
styleUrls: [ './app.component.scss' ]
})
export class AppComponent {
item = {
label: 'Label from item'
};
html: any = `<strong> Item label: ${this.item.label}</strong>`;
constructor() { }
}
Template strings use back-ticks (``) rather than the single or double-quotes.
Template strings can use placeholders for string substitution using the ${ } syntax.
You can't bind data like this way, because you bind data after Angular compile HTML, so you can try with another way like
export class AppComponent {
name = 'Angular 6';
searchterms = { answerId: 3 };
item = { label : 'Label from item' }
html = `<strong> Item label: ${this.item.label}</strong>`;
}
Inside your component, make it like this:
export class AppComponent {
name = 'Angular 6';
searchterms = {
answerId: 3
};
item = {
label : 'Label from item'
}
html = '<strong> Item label:'+ this.item.label + '</strong>';
}
If you want it to render as a string template. use string interpolation:
html = `<strong> Item label:${this.item.label} </strong>`;
<strong> Item label: ${this.item.label}</strong>