Angular-tree-component: Trouble Styling Nodes

[Edge1039]

I'm using this for a simple dynamic tree that the user can add and subtract nodes from and I've been trying to create my own custom styling, but it doesn't seem to be overriding any of the other styles. I've tried adding classes to the selector as well, but it doesn't seem to work.

CSS
#mytree{ background-color: red!important; }

HTML in Component

<tree-root id="mytree" [nodes]="nodes" [options]="options">
    <template #treeNodeTemplate let-node="node" let-index="index">
        ...html content...
    </template>
</tree-root>

I'm linking it to my component via the styleUrls.
My goal is to color code the background color of some of the nodes.

[dojchek]

@Edge1039
I needed the same the other day, here's how it can be done:

<template #treeNodeTemplate let-node="node">
    <div [ngClass]="getNodeClass(node)">
        { node.data.name }}
    </div>
</template>

Then, you can put any kind of styling logic in getNodeClass(node) method, like this for example:

getNodeClass(node: ITreeNode): string {
    if (node.data.disabled) {
      return 'tree-node tree-node-disabled';
    }
    return 'tree-node';
}

In the end, you just have to define your styles - Here's my scss:

.tree-node{
    color: darken($text-color, 20);
}
.tree-node.tree-node-disabled {
    color: lighten($text-color, 20);
}

[adamkleingit]

@Edge1039 Overriding styles should work - can you share your code?
@dojchek You can use nodeClass property of options instead of template if you only want a special class.

[leolivier]

Hi,
I had also the same kind of problem.
Adding some css in my component that contains the tree didn't work at all. I had to put all the css in the styles.css file that is declared at the highest level.
Note: I only get this problem for the tree, when I add css to my own components, it works well.
You can find my code in

• https://github.com/leolivier/knot-note/tree/master/src/app/notebook/notebook-tree for the component
  and at the end of
• https://github.com/leolivier/knot-note/blob/master/src/styles.css for the styles
  In my opinion, any styles that are declared below the /* nodetree */ line in this file should be declared inside https://github.com/leolivier/knot-note/tree/master/src/app/notebook/notebook-tree/notebook-tree.css but it does not work (tested in chrome 57)

[adamkleingit]

Hi,
you should scope your rules to .tree-wrapper, to make rules that are more specific than the ones used by the tree.

Then, you can put them inside your component style as well

I recommend using scss, for example:

.tree-wrapper {
  .node-content-wrapper {
    flex-grow: 1;
    position: relative;
  }
}

Or if you are using CSS:

.tree-wrapper .node-content-wrapper {
  flex-grow: 1;
  position: relative;
}

All the best

[leolivier]

Hi Adam,
I switched to scss, wrapped my classes in .tree-wrapper as you said but it still does not work when I move it to my component (it works as longs as I keep the styles in styles.scss at highest level).
I don't understand why...

[Hesesses]

I can confirm that too. Custom styles works in styles.scss, but not in my "tree.component.scss"

@leolivier did you find a solution for this?

@adamkleingit any ideas why this is happening?

[Hesesses]

Anyone?

[gRoussac]

@Hesesses, did you wrap you css into a deep rule ? Because I believe styling is on sub components right ?

```

{$deep} {

.tree-node {
...
.node-content-wrapper {
...
}
}
}
```

Regards

[tarmo-randma]

I used just CSS not SCSS so in my case the solution was to format it like this:

>>> .tree-children::after {
  border-left: 1px solid lightgrey;
  height: 100%;
  top: -15px;
  left: -15px;
}

[finalxcode]

@dojchek thanks