Angular Components

ClrTree

Selector & Basic Usage

<clr-tree>
  <!-- clr-tree-node children components -->
</clr-tree>

ClrTreeNode

Selector & Basic Usage

<clr-tree>
  <clr-tree-node>
    There is tree node content inside.
  </clr-tree-node>
  <!-- more sibling nodes as needed -->
</clr-tree>

Bindings

Binding	Type	Options	Default	Description
[(clrSelected)]	two-way	ClrSelectedState.UNSELECTED, ClrSelectedState.SELECTED, ClrSelectedState.INDETERMINATE	null	Enable selection for the tree and its nodes.
[clrExpandable]	input	true, false	false	When true, allow an app to prevent pre-loading of nodes that are not expanded..
[(clrExpanded)]	two-way	true, false	false	When true a node is expanded.

Angular Directives

ClrIfExpanded

Selector & Basic Usage

Use our *clrIfExpanded structural directive to lazy-load node children.

<clr-tree [clrLazy]="true">
  <clr-tree-node [clrLoading]="loading">
    <cds-icon shape="building"></cds-icon>
    Office Locations
    <ng-template clrIfExpanded (clrIfExpandedChange)="$event ? fetchLocations() : null">
      <clr-tree-node *ngFor="let location of locations$ | async">
        {{location}}
      </clr-tree-node>
    </ng-template>
  </clr-tree-node>
</clr-tree>

Bindings

Binding	Type	Options	Default	Description
[(clrIfExpanded)]	two-way	true, false	false	Two way binding for the expanded/collapsed state of a ClrTreeNode.

ClrRecursiveFor

Selector & Basic Usage

<clr-tree>
  <clr-tree-node *clrRecursiveFor="let node of nodes; getChildren: getChildren">
    {{node}}
  </clr-tree-node>
</clr-tree>

Bindings

Binding	Type	Options	Default	Description
[clrRecursiveFor]	input	The Type or array of Type representing ClrTreeNode's.		Two way binding of the
[clrRecursiveForGetChildren]	input	n/a		The function called used to iterate over the children of a node. Can return async results (Promise or Observable).