Ways to toggle checkboxes to show or hide their child items and subitems

Question

Ways to toggle checkboxes to show or hide their child items and subitems

I'm working on creating a straightforward menu that allows users to click on a parent checkbox to expand or collapse its children. The challenge I'm facing is how to make the parent checkboxes expand while hiding the children items within them when clicked. Here's what I want the outcome to look like:

https://i.sstatic.net/sIGlk.png

Below is the function I've created for selecting or unselecting:

 selectUnselectAll(obj) {
    obj.isAllSelected = !obj.isAllSelected;
    // tslint:disable-next-line:prefer-for-of
    for (let i = 0; i < obj.ParentChildchecklist.length; i++) {
      obj.ParentChildchecklist[i].isSelected = obj.isAllSelected;
      // tslint:disable-next-line:prefer-for-of
      for (let j = 0; j < obj.ParentChildchecklist[i].choices.length; j++) {
        obj.ParentChildchecklist[i].choices[j].isSelected = obj.isAllSelected;
      }
    }
  }

This link takes you to the entire application:

Link to the app in stackblitz

Currently, my dressing and bread lists do not collapse at all. How can I make the children also collapse?

Any guidance on achieving this would be greatly appreciated.

angular typescript

Answer 1

Answer №1

If you want a more efficient way to handle form control changes, consider utilizing the valueChanges Observable from the parent controls and conditionally displaying it in the child controls container using *ngIf:

In TypeScript:

this.showBread$ = this.breadCtrl.valueChanges;

In HTML:

<input type="checkbox" [formControl]="breadCtrl">
<div class="bread-container" *ngIf="showBread$ | async">
  <!-- children here -->
</div>

This approach promotes the use of reactive forms which is highly recommended in majority of cases.

Update: Instead of manually checking boxes, you can utilize patchValue on each control (or their containing FormGroup) for a more Angular-friendly approach.

Answer 2

If you want a more efficient way to handle form control changes, consider utilizing the valueChanges Observable from the parent controls and conditionally displaying it in the child controls container using *ngIf:

In TypeScript:

this.showBread$ = this.breadCtrl.valueChanges;

In HTML:

<input type="checkbox" [formControl]="breadCtrl">
<div class="bread-container" *ngIf="showBread$ | async">
  <!-- children here -->
</div>

This approach promotes the use of reactive forms which is highly recommended in majority of cases.

Update: Instead of manually checking boxes, you can utilize patchValue on each control (or their containing FormGroup) for a more Angular-friendly approach.

Ways to toggle checkboxes to show or hide their child items and subitems

Answer №1

Similar questions

What steps should be followed to effectively incorporate Google Fonts into a Material UI custom theme for typography in a React/TypeScript project

Creating a new Angular2 component for a separate URL path

Using TypeScript, a parameter is required only if another parameter is passed, and this rule applies multiple

Methods for verifying an empty array element in TypeScript

What is the best way to send an XML body using Angular 5 with POST method?

Angular error: Attempting to access the value property of an undefined object

Utilizing ResolveComponentFactory() with a String Key: A Step-by-Step Guide

What could be causing the itemClicked() function to malfunction intermittently in Ionic2 / Angular2?

Unveiling the types of an object's keys in Typescript

In Angular, there is an issue where the @ViewChild decorator does not reflect changes when the value of the child component is updated within the

Elements can only be added to the array at the 0th index

Setting up Angular Universal on an already existing Angular 2 application with the help of the CLI

Testing the creation of elements dynamically with jestLooking into jest for dynamically adding

Implementing group validation with Angular

Issue encountered with Ionic and ssh2: process.binding is not supported

Is there a way to toggle or collapse a table row with a unique identifier using Angular and Bootstrap?

Typescript: Extracting data from enum items using types

TSLint warning: Duplicate identifier detected - 'err'

When working with an observable in an Angular Material table, the *ngIf directive may not function as expected

What's preventing me from using just one comparison condition in TypeScript?