How can I make tree node text in the Clarity Tree View clickable?

Question

I have the following tree structure generated using the Clarity Framework (clr-tree element).

This is the code I've written to generate it in the view:

<clr-tree>
  <clr-tree-node
    *clrRecursiveFor="let item of list; getChildren: getChildren"
    (click)="onSelect(item)"
    [class.m-selected]="selected && item.slug === selected.slug"
    > {{item.title}}
  </clr-tree-node>
</clr-tree>

It works fine but the problem is that I can only expand the folders by clicking on the icon . Clicking on the title text of the folder doesn't expand the children. Is there any way using the Clarity framework to achieve such a behavior?

Answer 1

You can bind to the expanded state using clrExpanded and bind a property to determine if the node should expand. Then using your click handler you can toggle that state programatically.

<clr-tree>
  <clr-tree-node
    *clrRecursiveFor="let item of list; getChildren: getChildren"
    (click)="onSelect(item) && item.expanded = !item.expanded"
    [(clrExpanded)]="item.expanded"
    [class.m-selected]="selected && item.slug === selected.slug"
    > {{item.title}}
  </clr-tree-node>
</clr-tree>