Clarity lazy loaded clr-tree clrSelected failure

Viewed 147

I'm trying to implement a Clarity lazy-loaded clr-tree. My data model of nodes contains a "selected" field. When I set this as indicated in the docs on clr-tree-node, the initial load of the tree is null, and the clrSelected attributes errors out the entire view.

Here's my Angular template code for the tree:

<clr-tree [clrLazy]="true" *ngIf="initialized">
    <clr-tree-node *clrRecursiveFor="let setnode of root$ | async; getChildren: getChildren"
        [clrExpandable]="setnode?.nodeType == 'S'" [(clrSelected)]="setnode.selected">
        <cds-icon [attr.shape]="setnode?.nodeType == 'S' ? 'factory' : 'flask'"></cds-icon>
        {{setnode?.labelText}}
    </clr-tree-node>
</clr-tree>

The $root is set in the component as an Observable<SetNode> that is a result of my HTTP client call. The getChildren call returns the same Observable.

Here is the error I get:

TypeError: Cannot read property 'selected' of null

This appears to be coming from the [(clrSelected)]="setnode.selected" section of the clr-tree-node element. I know this has to do with the template rendering before the Observable finishes, I'm just not sure how to tell the clrSelected to ignore it until it finishes, as otherwise setnode is null.

Alternatively, is there another way to get the clr-tree out of read-only mode? Without the clrSelected, the clr-tree does not allow for selection (highlighting) of nodes.

1 Answers

The failure is at the Angular level, where it cannot resolve the binding in the template. You already have the solution in a few places, use the ?. operator to address this issue.

[(clrSelected)]="setnode?.selected"
Related