Create Custom Checkbox tree view component Angular

Question

I want to create Tree View component in Angular with checkbox. Please find my code at -

https://stackblitz.com/edit/angular-qvzr8c

Here I am able to render tree View on UI. But want to implement functionality -

When Parent checkbox is checked then all its child check box should be checked automatically.
When all child checkboxes checked then parent node chekbox should automatically selected.
At the end want list of all selected checkboxes.

Here how can I set model to checkboxes and achieve above functionality.

Eliseo · Accepted Answer · 2020-02-26 19:39:36Z

4

the first you need is add a new optional property to your TreeNode

interface TreeNode {
    label: string;
    check?:boolean; //<--this one
    children: TreeNode[];
  }

After you can use [ngModel] in the input, and (ngModelChange) to call a function "selectNode"

 <label class="node__label">
        <input type="checkbox" [ngModel]="node.check" 
          (ngModelChange)="selectNode(node,$event)"/>
    {{ node.label }}
</label>

the seletNode is a function that call a recursive function:

  public selectNode( node: TreeNode,value:boolean ) : void {
        this.check(node,value)
  }

  check(node:any,value:boolean)
  {
    node.check=value;
    node.children.forEach(x=>
    {
      this.check(x,value)
    })
  }

You can see in this stackblitz

But you can take account the suggest of @Dseroski and not re-invent the wheel :)

answered Feb 26, 2020 at 19:39

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Saurabh Mahajan Over a year ago

Thank you Eliseo. Actually here we want to create completely custom tree view no other plugin we can use. Here one more question I have please suggest - When child is unchecked then all its parents become uncheck. How can I proceed in that? Please suggest.

dseroski · Accepted Answer · 2020-02-26 19:12:45Z

0

Angular Material has a pretty good Tree module. This example is explicitly similar to what you need, aside from a few logic changes on checking a box.

https://stackblitz.com/angular/baxxqmgxmgq?file=src%2Fapp%2Ftree-checklist-example.ts

answered Feb 26, 2020 at 19:12

dseroski

314 bronze badges

Comments

Aman Gojariya · Accepted Answer · 2021-04-01 12:24:03Z

0

Please try with this plugin. It will works for you.

answered Apr 1, 2021 at 12:24

Aman Gojariya

1,5031 gold badge12 silver badges24 bronze badges

Comments

Betrunkenmeister · Accepted Answer · 2025-02-28 16:07:19Z

0

This stackblitz from this question was useful for me

answered Feb 28 at 16:07

Betrunkenmeister

11 bronze badge

1 Comment

Chris Mar 1 at 20:16

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

Collectives™ on Stack Overflow

Create Custom Checkbox tree view component Angular

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related