Triple mustache to escape value erroring in Angular app - html

Question

I've tried this in several different angular apps and get the same error. I've verified that the latest version of Handlebars is installed. Whenever I try to use the triple mustache {{{ }}} to render html as html within an html file, the compiler throws this error (I'm using VSCode, but the same error occurs within the stackblitz below):
Template parse errors:
Parser Error: Missing expected : at the end of the expression [{{{item}}}] in ng:///AppModule/AppComponent.html#9:37 ("DropListEnterPredicate]="enter" (cdkDropListDropped)="drop()">
<div cdkDrag class="example-box">[ERROR ->]{{{item}}}</div>
</div>
</div> "): ng:///AppModule/AppComponent.html#9:37
Parser Error: Unexpected end of expression: {{{item}}} at the end of the expression [{{{item}}}] in ng:///AppModule/AppComponent.html#9:37 ("DropListEnterPredicate]="enter" (cdkDropListDropped)="drop()">
<div cdkDrag class="example-box">[ERROR ->]{{{item}}}</div>
</div>
</div> "): ng:///AppModule/AppComponent.html#9:37
Parser Error: Missing expected } at the end of the expression [{{{item}}}] in ng:///AppModule/AppComponent.html#9:37 ("DropListEnterPredicate]="enter" (cdkDropListDropped)="drop()">
<div cdkDrag class="example-box">[ERROR ->]{{{item}}}</div>
</div>
</div> "): ng:///AppModule/AppComponent.html#9:37
I've copied a simple stackblitz, in it I've duplicated the error by putting the triple braces around the {{{item}}}.
https://stackblitz.com/edit/angular-4kmtwp
I've tried { {{ item }} }, {{ '{' }} {{ item }} {{ '}' }}, &123;&123;&123; item &125;&125;&125; but none of those render the html.

Answer 1

The solution was to change the line:
<div cdkDrag class="example-box">{{{item}}}</div>
to
<div cdkDrag class="example-box" [innerHtml]="item"></div>
As an additional note, if there are class names within the innerHtml that you need to style, you may need to set the encapsulation within the typescript file as ViewEncapsulation.None.
i.e. encapsulation: ViewEncapsulation.None