angular-tree-component style node with html

Question

I am using angular 5 and the angular-tree-component https://github.com/500tech/angular-tree-component. I would like to style one node different from the others

import { Component, ViewChild} from '@angular/core';
import { TreeComponent } from 'angular-tree-component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  @ViewChild('myTree')
  private tree: TreeComponent;

  nodes = [
    {
      id: 1,
      name: 'root1',
      children: [
        { id: 2, name: '<b>child1</b>' },
        { id: 3, name: 'child2' }
      ]
    }
  ];
}

So the Problem is, that the b tags are sanitized by angular to \lt b \gt \lt b \gt.

How can I pragmatically generate HTML in angular?

If you have stackblitz sample, Kindly share, we are also stuck with drawing dotted lines in tree view component's nodes. — Cegone
– Cegone, Commented Mar 16, 2020 at 10:46

Georg Unterholzner · Accepted Answer · 2019-04-17 13:41:33Z

10

You can define a custom treeNodeTemplate. This will allow you to add custom classes to each node template.

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

then pass your css classes to the node data

nodes = [
  {
    id: 1,
    name: 'root1',
    classes: ['text-bold'],
    children: [...]
  }
];

and finally define that class

.text-bold{
  font-weight: 700;
}

You could also update the template to just use the innerHTML directive so you can pass in html to the name property.

<ng-template #treeNodeTemplate let-node let-index="index">
  <span [innerHTML]="node.data.name"></span>
</ng-template>

edited Apr 17, 2019 at 13:41

Georg Unterholzner

1,2821 gold badge18 silver badges28 bronze badges

answered Jan 25, 2018 at 14:59

LLai

13.5k3 gold badges45 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user6786577 Over a year ago

Thank you! Your answer was very helpful!

WebThre3 · Accepted Answer · 2019-04-11 17:56:07Z

0

Be sure to apply ng deep

scss

/deep/ {
  .tree-wrapper {
    .tree-children {
      padding-left: 5px;
    }
  }
}

html

<div class="tree-wrapper">
    <tree-root
      [nodes]="menuItems | async | tableFilter: [menuFilterTerm]"
      [options]="options"
      (activate)="onSelectMenuItem($event)"
    >
    </tree-root>
  </div>

answered Apr 11, 2019 at 17:56

WebThre3

12 bronze badges

Collectives™ on Stack Overflow

angular-tree-component style node with html

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related