The process of removing an item from an array when a checkbox is deselected in Angular 4

Question

The process of removing an item from an array when a checkbox is deselected in Angular 4

I am currently working with an array of objects where each object contains another array.

panels = [{
  Id: "26cfdb68-ef69-4df0-b4dc-5b9c6501b0dd",
  Name: "Celiac test",
  Tests: [{
      Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
      Name: "test 1 (DGP) IgG"
    },
    {
      Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
      Name: "test 2 (DGP) IgG"
    },
    {
      Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
      Name: "test 3 (DGP) IgG"
    }
  ]
}],

My goal is to create a bootstrap accordion with checkboxes based on this data structure.

The design requires a main checkbox for the object, followed by individual checkboxes for the array elements.

When I click the main Panel checkbox, it should also select all the Tests checkboxes and store the panel object in a variable called selectedPanel. Deselecting the main Panel should unselect all Tests checkboxes as well.

While I have accomplished this functionality, the main challenge lies in removing a Test checkbox from selectedPanel and updating its length when deselected.

If anyone can provide assistance with this issue, it would be greatly appreciated.

I have created a demo on Stackblitz:

Stackblitz

javascript angular typescript checkbox accordion

Answer 1

Answer №1

If you're looking for a solution, consider the following approach.

<ngb-accordion #acc="ngbAccordion">
  <ngb-panel *ngFor="let panel of panels; let i = index" id="{{panel.Id}}" [title]="panel.Name">
     <ng-template ngbPanelTitle>
        <span class="panel-length"><strong>{{panel.Tests.length}}</strong></span>

            <input type="checkbox" class="form-check-input ml-5" id="{{panel.Id}}" name="{{panel.Name}}">


      </ng-template>
    <ng-template ngbPanelContent>
    <div class="individual-panel" *ngFor="let test of panel.Tests, let j = index;">
          <span class="text-dimmed">{{test.Name}}</span>
            <input type="checkbox" class="form-check-input ml-5" id="{{test.Id}}" name="{{test.Name}}" (click)="checkItem(i, j)">  
        </div>
    </ng-template>
  </ngb-panel>
</ngb-accordion>

   <!-- <span class="panel-length"><strong>{{panels.Tests.length}}</strong></span> -->

TS

checkItem(i, j){
   this.panels[i].Tests.splice(j, 1);
   console.log(this.panels[i].Tests);
  }

This suggestion is provided in hopes that it may be of assistance to you.

Answer 2

If you're looking for a solution, consider the following approach.

<ngb-accordion #acc="ngbAccordion">
  <ngb-panel *ngFor="let panel of panels; let i = index" id="{{panel.Id}}" [title]="panel.Name">
     <ng-template ngbPanelTitle>
        <span class="panel-length"><strong>{{panel.Tests.length}}</strong></span>

            <input type="checkbox" class="form-check-input ml-5" id="{{panel.Id}}" name="{{panel.Name}}">


      </ng-template>
    <ng-template ngbPanelContent>
    <div class="individual-panel" *ngFor="let test of panel.Tests, let j = index;">
          <span class="text-dimmed">{{test.Name}}</span>
            <input type="checkbox" class="form-check-input ml-5" id="{{test.Id}}" name="{{test.Name}}" (click)="checkItem(i, j)">  
        </div>
    </ng-template>
  </ngb-panel>
</ngb-accordion>

   <!-- <span class="panel-length"><strong>{{panels.Tests.length}}</strong></span> -->

TS

checkItem(i, j){
   this.panels[i].Tests.splice(j, 1);
   console.log(this.panels[i].Tests);
  }

This suggestion is provided in hopes that it may be of assistance to you.

Answer 3

Answer №2

If you want to see a quick demonstration, check out my Stackblitz demo HERE

In this demo, the parent checkbox controls the toggle of its child checkboxes, and each checkbox has a checked parameter to indicate which one is selected.

This setup simplifies the process of managing the state of each checkbox without having to manually manipulate them on every change.

Answer 4

If you want to see a quick demonstration, check out my Stackblitz demo HERE

In this demo, the parent checkbox controls the toggle of its child checkboxes, and each checkbox has a checked parameter to indicate which one is selected.

This setup simplifies the process of managing the state of each checkbox without having to manually manipulate them on every change.

Answer 5

Answer №3

Check out this Stackblitz example: https://stackblitz.com/edit/angular-bsszc9?file=src/app/app.component.ts

This code snippet serves as a quick illustration of a technique that could be utilized.

In the code, I have added an isShown property to the tests. It's important to refactor these tests into separate objects within their own module.

panels = [{
  CategoryId: "31b7a227-9fda-4d14-8e1f-1dee5beeccb4",
  Id: "26cfdb68-ef69-4df0-b4dc-5b9c6501b0dd",
  Name: "Celiac test",
  Tests: [
  {Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
   Name: "test 1 (DGP) IgG", 
   isShown: true },
  {
   Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
   Name: "test 2 (DGP) IgG", 
   isShown: true },
  {
   Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
   Name: "test 3 (DGP) IgG", 
   isShown: true}
]
},
{
  CategoryId: "31b7a227-9fda-4d14-8e1f-1dee5beeccb4",
  Id: "26cfdb68-ef69-4df0-b4dc-5b9c6501b0dd",
  Name: "Comprehensive test",
  Tests: [
  {Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
   Name: "test 1  (DGP) IgG"},
  {
   Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
   Name: "test 2  (DGP) IgG"},
  {
   Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
   Name: "test 3  (DGP) IgG"}
]
}]

Clicking the input box triggers a click event that sets the test.isShown property to false. The *ngIf directive will hide the test from being displayed. (Note: A new ng-container was introduced due to restrictions on using *ngFor and *ngIf in the same container).

<ng-container *ngFor="let test of panel.Tests">
  <div class="individual-panel" *ngIf='test.isShown'>
    <span class="text-dimmed">{{test.Name}}</span>
    <input type="checkbox" class="form-check-input ml-5" id="{{test.Id}}" name="{{test.Name}}" (click)="hide( test )" >   
  </div>
</ng-container>

The method below gets triggered by the click event. Alternatively, you could remove the test from the array (although this may not be recommended as it can affect data integrity);

hide( test ) {
  test.isShown = false;
}

This explanation aims to demonstrate a simple technique. For better maintainability, consider refactoring into smaller classes/modules. I hope this helps! ;)

Answer 6

Check out this Stackblitz example: https://stackblitz.com/edit/angular-bsszc9?file=src/app/app.component.ts

This code snippet serves as a quick illustration of a technique that could be utilized.

In the code, I have added an isShown property to the tests. It's important to refactor these tests into separate objects within their own module.

panels = [{
  CategoryId: "31b7a227-9fda-4d14-8e1f-1dee5beeccb4",
  Id: "26cfdb68-ef69-4df0-b4dc-5b9c6501b0dd",
  Name: "Celiac test",
  Tests: [
  {Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
   Name: "test 1 (DGP) IgG", 
   isShown: true },
  {
   Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
   Name: "test 2 (DGP) IgG", 
   isShown: true },
  {
   Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
   Name: "test 3 (DGP) IgG", 
   isShown: true}
]
},
{
  CategoryId: "31b7a227-9fda-4d14-8e1f-1dee5beeccb4",
  Id: "26cfdb68-ef69-4df0-b4dc-5b9c6501b0dd",
  Name: "Comprehensive test",
  Tests: [
  {Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
   Name: "test 1  (DGP) IgG"},
  {
   Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
   Name: "test 2  (DGP) IgG"},
  {
   Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
   Name: "test 3  (DGP) IgG"}
]
}]

Clicking the input box triggers a click event that sets the test.isShown property to false. The *ngIf directive will hide the test from being displayed. (Note: A new ng-container was introduced due to restrictions on using *ngFor and *ngIf in the same container).

<ng-container *ngFor="let test of panel.Tests">
  <div class="individual-panel" *ngIf='test.isShown'>
    <span class="text-dimmed">{{test.Name}}</span>
    <input type="checkbox" class="form-check-input ml-5" id="{{test.Id}}" name="{{test.Name}}" (click)="hide( test )" >   
  </div>
</ng-container>

The method below gets triggered by the click event. Alternatively, you could remove the test from the array (although this may not be recommended as it can affect data integrity);

hide( test ) {
  test.isShown = false;
}

This explanation aims to demonstrate a simple technique. For better maintainability, consider refactoring into smaller classes/modules. I hope this helps! ;)

Answer 7

Answer №4

To start, you must include an additional attribute in your panels and Tests arrays to keep track of the checkbox state. The structure of your panels array should look like this:

panels = [{
  Id: "26cfdb68-ef69-4df0-b4dc-5b9c6501b0dd",
  Name: "Celiac test",
  checked: false,
  Tests: [{
      Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
      Name: "test 1 (DGP) IgG",
      checked: false
    },
    {
      Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
      Name: "test 2 (DGP) IgG",
      checked: false
    },
    {
      Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
      Name: "test 3 (DGP) IgG",
      checked: false
    }
  ]
}]

Next, you need to evaluate the checkbox value to determine if you want to include that specific test in your selectedPanel or not.

I assume that both your panels and Tests have a unique Id attribute

You can access the updated version of your stackblitz here

I trust this aligns with the intended behavior you are aiming for.

Answer 8

To start, you must include an additional attribute in your panels and Tests arrays to keep track of the checkbox state. The structure of your panels array should look like this:

panels = [{
  Id: "26cfdb68-ef69-4df0-b4dc-5b9c6501b0dd",
  Name: "Celiac test",
  checked: false,
  Tests: [{
      Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
      Name: "test 1 (DGP) IgG",
      checked: false
    },
    {
      Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
      Name: "test 2 (DGP) IgG",
      checked: false
    },
    {
      Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
      Name: "test 3 (DGP) IgG",
      checked: false
    }
  ]
}]

Next, you need to evaluate the checkbox value to determine if you want to include that specific test in your selectedPanel or not.

I assume that both your panels and Tests have a unique Id attribute

You can access the updated version of your stackblitz here

I trust this aligns with the intended behavior you are aiming for.

The process of removing an item from an array when a checkbox is deselected in Angular 4

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Guiding a WordPress Form Submission to a Different Page

What is the reason buttons in mat-menus do not submit?

`Manipulating binding and text options in a dropdown selection using knockout.js`

Connect a responsive div to a main div

Issue encountered while attempting to install dependencies using Stackblitz

Updating the table row by extracting data and populating it into a form

Initiate a Gravity Forms form refresh after modifying a hidden field with jQuery

Looking to alter the appearance of a div within an iframe by matching it with the title of the parent window using javascript?

JS: Modifying this function to manage a click on a hyperlink

What steps do I need to take in order to make fullscreen slides?

What should the formatting of a web3py ABI be for an ethereum contract that produces array outputs?

Tips for selecting a specific input field in a ReactJS component with multiple inputs

Navigation menu featuring unique links for varying pages

Interpolating strings with Angular does not result in binding

Utilizing Firefox and Selenium with Python: A guide to dynamically accessing HTML elements

Is a JavaScript variable automatically global if not declared with var?

Dealing with errors in promises

Guide on deploying an Angular 2 CLI project on a locally hosted Ubuntu production server

Unable to connect with API data in Angular 6

Sending multiple files as the source of a page to clients in Node.js: A step-by-step guide