search

CirclonGroup / angular-tree-component

A simple yet powerful tree component for Angular (>=2)
https://angular2-tree.readme.io/docs
MIT License
1.1k stars 492 forks source link

How to enable HTML codes in node titles? #881

Closed nam-vuhoang closed 3 years ago

nam-vuhoang commented 3 years ago

I'd like to format node titles with HTML codes, for example <b>${index}.</b> ${name}, but they are automatically encoded with &lt; and &gt;.

Is it possible to disable this HTML-encoding?

tobiasengelhardt commented 3 years ago

@nam-vuhoang The sanitized html is Angular preventing xss injection. If you really want to apply the html from string you need a custom template in the tree:

<tree-root [nodes]="nodes">
  <ng-template #treeNodeTemplate let-node let-index="index">
    <span [innerHtml]="node.data.name"></span>
  </ng-template>
</tree-root>

I would still strongy suggest not using that and just adjusting the template to fit the input:

<tree-root [nodes]="nodes">
  <ng-template #treeNodeTemplate let-node let-index="index">
    <span><b>{{node.data.index}}.</b> {{node.data.name}}</span>
  </ng-template>
</tree-root>
nam-vuhoang commented 3 years ago

I would still strongy suggest not using that and just adjusting the template to fit the input:

<tree-root [nodes]="nodes">
  <ng-template #treeNodeTemplate let-node let-index="index">
    <span><b>{{node.data.index}}.</b> {{node.data.name}}</span>
  </ng-template>
</tree-root>

@tobiasengelhardt : Thank you for this suggestion. It works for me!