Q: Custom directive not working when using with a third party library (Angular 2+) I have a custom directive that is linked in properly, but doesn't seem to work when I am using it with a third party library. I know it's linked in properly because when I use it in the component.html it works fine. But when using it in the component.ts, it doesn't work.
So here's my code:
component.ts:
gantt.templates.rightside_text = ((start, end, task) => {
  return `
    <div [icon]="flag" style="height: 15px; width: 15px;"></div>
  `
});

[icon]="flag"  doesnt work. But if I throw that whole return statement in the html it works fine.
Why is it not kicking in?
I'm using the dhtmlx gantt library. Here's a link to the library's documentation.

A: What you are trying to achieve is to compile the Directive through String value, which is certainly the not way you can achieve in Angular today. May be Angular support this in future since there many people who are seeking for similar functionality.
What is alternative solution ?

*

*You can put the css class instead and customize through css. Not a great solution though.

*You can create the Directive which you can put at the very first parent in html and by using @ViewChild and Query Selector, you can find the element and manipulate as per your requirement.

