Search code examples
angularvmware-clarity

Use *ngIf to filter tree nodes in clarity recursive tree


I have a recursive clarity tree

<clr-tree>
  <clr-tree-node 
      *clrRecursiveFor="let type of displayedTypes; getChildren: getTypeChildren" 
      [(clrSelected)]="type.selected"    
      [(clrExpanded)]="type.expanded"
    >
      {{type.name}}
    </clr-tree-node>
</clr-tree>

But I want to filter some tree nodes. In a simple case I would use *ngIf directive. But I already have another directive *clrRecursiveFor here. So I try to wrap it into ng-container.

<clr-tree>
    <ng-container  *clrRecursiveFor="let type of displayedTypes; getChildren: getTypeChildren" > 
      <clr-tree-node *ngIf="isVisible(type)"...>
          ...
        </clr-tree-node>
        </ng-container>
    </clr-tree>

You can see some examples here in app.component.html

But in this case nothing is shown even if isVisible always returns true. How can I use *ngIf directive here to filter tree nodes?


Solution

  • It's impossible now. It's better to filter array in a component.