folder-open
, filter-grid
,
filter-grid-circle
and map
0.10.0-alpha introduces a breaking change in the Tree View component.
<clr-tree-node>
Parent Node
<clr-tree-node>
Child Node 1
</clr-tree-node>
<clr-tree-node>
Child Node 2
</clr-tree-node>
</clr-tree-node>
*clrIfExpanded
structural directive to render the child
nodes only when the parent node is expanded. We recommend that you use the de-sugared syntax of the structural
directive.
<clr-tree-node>
Parent Node
<ng-template clrIfExpanded>
<clr-tree-node>
Child Node 1
</clr-tree-node>
<clr-tree-node>
Child Node 2
</clr-tree-node>
</ng-template>
</clr-tree-node>
<clr-tree-node>
Parent Node
<clr-tree-node *clrIfExpanded>
Child Node
</clr-tree-node>
<clr-tree-node *clrIfExpanded>
Child Node 2
</clr-tree-node>
</clr-tree-node>
<clr-tree-node [(clrTreeNodeExpanded)]="expand">
Parent Node
<clr-tree-node>
Child Node 1
</clr-tree-node>
<clr-tree-node>
Child Node 2
</clr-tree-node>
</clr-tree-node>
<clr-tree-node>
Parent Node
<ng-template [(clrIfExpanded)]="expand">
<clr-tree-node>
Child Node 1
</clr-tree-node>
<clr-tree-node>
Child Node 2
</clr-tree-node>
</ng-template>
</clr-tree-node>
<clr-tree>
<clr-tree-node>
Parent Node
<clr-tree-node>
Child Node 1
</clr-tree-node>
<clr-tree-node>
Child Node 2
</clr-tree-node>
</clr-tree-node>
<clr-tree>
[(clrSelected)]
Input on the root node.
<clr-tree-node [(clrSelected)]="selected">
Parent Node
<ng-template clrIfExpanded>
<clr-tree-node>
Child Node 1
</clr-tree-node>
<clr-tree-node>
Child Node 2
</clr-tree-node>
</ng-template>
</clr-tree-node>
Input/Output | Alternative |
---|---|
[(clrTreeNodeExpanded)] |
Input/Output on the clrIfExpanded directive |
[(clrTreeNodeExpandable)] |
Not needed anymore because tree nodes automatically detect and register the
clrIfExpanded directive to make themselves expandable
|
[clrTreeNodeLoading] |
clrLoading directive nested in the
clrIfExpanded directive to activate the loading indicator when the parent
node is expanded
|
[(clrTreeNodeSelected)] |
This has been replaced by [(clrSelected)]
on the TreeNode.
|
[(clrTreeNodeModel)] |
Not needed anymore since this was only used to output the overall selection which the new tree does not do anymore. |
clr-tree
and the Output (clrTreeSelectedChange)
have
now been removed. Because the nodes are now lazily loaded, there is no way for us to output the currently
selected nodes back to the user. Instead, you can now use (clrSelectedChange)
on
the TreeNode itself. [clrTreeSelected]
input has now been replaced by the
[clrSelected]
on the TreeNode.