This is a simple directive gets string that can be also html (I use html pipe so it is working fine):
<div [my-directive]="'any string...'"></div>
Also this will render fine:
<div [my-directive]="'<div style=\'color:red;\'></div>'"></div>
and also that will work great:
<div [my-directive]="'<div>{{object.value}}</div>'"></div>
BUT if I will add ng-if or ng-class that will not work:
<div [my-directive]="'<div ng-if=\'object.value === \'OK\' \'></div>'"></div>
and I don't understand why. Why {{ }} will render, but ng-* will not.
The directive component takes the string and insret it as innerHTML:
template: <div [innerHTML]="htmlStr"></div>
the htmlStr is SafeHtml
.