Building a Checkbox Tree with Angular FormArray

If you would like to know a radio button tree can be implemented, you can check the below:

Implementing a checkbox tree is very similar to a radio button tree but with slight differences.

Below the data we are going to use. Its an array of objects exported from books.ts

Each object describes the type of book,few authors who have written books on that genre and the books they have written.

Template:

Checkbox Tree

Observe the below object to understand how the template is constructed.

We have an array named books which contains 2 objects. The above snippet shows 1 object of the 2.

  1. So the above books array corresponds to the below FormArray booksArray.

2. Each object in the books array contains 2 properties:type and authors. type is a string and authors is an array of objects.

So each object is a FormGroup,type string corresponds to the type FormControl and the authors array corresponds to the authors FormArray.

3. In the authors array, we again have objects with 2 properties:name and books. name is a string and books is an array of strings.

So each object is a FormGroup,name string corresponds to the name FormControl and the books array corresponds to the select FormArray.

4. Finally, each element of the array books is a string. So each element is a FormControl.

Now lets check the Component Class:

The data we have exported from books.ts is an object containing an array books of objects. Thus we shall construct the array first using FormArray named booksArray as you see below. The array is initialised to [].

Once the component is loaded,we have written the logic to construct the FormGroups inside this FormArray. Each FormGroup corresponds to an object in the books array.

data is a variable holding the exported object. data.books holds the array of objects.

We have iterated through this array and for each object in the array we are adding a new FormGroup into the FormArray.

Each FormGroup contains a FormControl named type and a FormArray named authors.

FormControl type corresponds to the type property and FormArray authors corresponds to the authors array in each object of the books array.

The FormArray value is returned by the loadAuthors(). We are passing the authors array as argument to the method.

Since authors is an array of objects, we are iterating through the array and pushing a new FormGroup for each object. Each FormGroup contains 2 controls: FormControl-name and a FormArray-select.

FormControl name corresponds to the name property in the authors array and FormArray select corresponds to the array of strings in the authors array.

The FormArray select is initialised bu the loadBooks().

Here we are not pushing any FormGroups. We are just pushing a FormControl whose initial value is false. This implies that all the checkboxes will be initially unchecked.

Each FormControl corresponds to a book name in the books array inside the authors array.

We have a checkbox corresponding to each book.

So lets say you check a few checkboxes and submit. The output looks like below:

On submitting the Form

As you can see, we have the checked and unchecked status of each book which is suitable when submitting to the server.

When the form is submitted, the below method executes.

When I check a checkbox, the value of the checkbox changes to true. But this is not really a useful information, when I am submitting to the server.

As you can see, we are storing the form.value in a block variable modifiedForm and iterating through it. The aim is to modfiy the value of each checkbox into an object containing the book name and its checked status.

Finally, In order to toggle the visibility of the authors and books in the Tree, we have created a Directive below which does the job. We should be able to hide/show the authors whenever we click on the type of book and hide/show book list whenever we click on the author name.

The directive has been applied to the below 2 <i> tags in the template.

So whenever I click on any of these 2 elements, the toggleDisplay() of the directive is called. This method uses the ID of the clicked element and the classes of the target list to decide whether to hide or show the list.

The Directive uses the below classes to toggle:

Check the entire working below:

An Angular Developer who loves finding answers to all the mysteries of this universe