Use *ngIf to filter tree nodes in clarity recursive tree

Question

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?

seems like a duplicate of https://stackoverflow.com/questions/35100716/angular-2-two-structural-directives-on-the-same-dom-element — bubbles, Jul 10 '19 at 13:38
Elma, I'm not familiar with stackblitz. This is example https://stackblitz.com/edit/angular-4bpqdh?file=src%2Fapp%2Fapp.component.ts But it's now working properly — Артур Гудиев, Jul 10 '19 at 14:10
can you add the correct dependencies, css and make it work ? — bubbles, Jul 10 '19 at 15:58
So, is this question answered or is there more help that you need with your use case? — hippeelee, Jul 11 '19 at 00:11
I think this is an internal bug of this lib, they trying to get the context even if it’s not existing... you can maybe filter your array insteed and show always all the elements of it — bubbles, Jul 11 '19 at 07:41

score 0 · Accepted Answer · answered Jul 11 '19 at 11:12

0

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

answered Jul 11 '19 at 11:12

Артур Гудиев

1,004
2
10
26

Use *ngIf to filter tree nodes in clarity recursive tree

1 Answers1