Angular2: Determining which checkboxes have been selected

Question

Angular2: Determining which checkboxes have been selected

Currently, I am utilizing angular2 and have the following HTML code:

<div *ngFor="let val of channelForTabs; let i=index">
            <label for="isCheckBox" style="margin-left:15px;">Draw</label>
            <input id="checkBox{{i}}" type="checkbox" class="fitCheckbox" style="margin-left: 10px;width: 16px;" />
            <de-series-prop></de-series-prop>
        </div>

With each value in channelForTabs, a checkbox and series component are added. How can I determine which checkboxes are checked without using the (change) method?

On a button click, I would like to identify which checkboxes are checked and retrieve the corresponding series data.

angular typescript

Answer 1

Answer №1

To implement functionality using ngModel and ngModelChange event, follow the code snippet below:

<input type="checkbox" (ngModelChange)="onCheckboxChange(color, $event)" checked="false" [ngModel]="!color"> {{color}}<br>

Define your method like this:

 onCheckboxChange(value, event){
    if(event){
    this.selectedItems.push(value);
    }
    console.log(value);
  }

Check out the LIVE DEMO

Answer 2

To implement functionality using ngModel and ngModelChange event, follow the code snippet below:

<input type="checkbox" (ngModelChange)="onCheckboxChange(color, $event)" checked="false" [ngModel]="!color"> {{color}}<br>

Define your method like this:

 onCheckboxChange(value, event){
    if(event){
    this.selectedItems.push(value);
    }
    console.log(value);
  }

Check out the LIVE DEMO

Answer 3

Answer №2

While this method may function, when a user deselects an option, the value remains in the array. To ensure accurate results, the value should be removed each time it is unchecked.

let idx = this.selectedItems.indexOf(element.value);
            this.selectedItems.splice(idx, 1);

Answer 4

While this method may function, when a user deselects an option, the value remains in the array. To ensure accurate results, the value should be removed each time it is unchecked.

let idx = this.selectedItems.indexOf(element.value);
            this.selectedItems.splice(idx, 1);

Angular2: Determining which checkboxes have been selected

Answer №1

Answer №2

Similar questions

"This error message states that the use of an import statement outside a module is not allowed

Issue detected in Angular 2 Heroes Tutorial: The element with the selector "my-app" was not found in the document

After defining the NEXTAUTH_URL and NEXTAUTH_SECRET variables, the getServerSession(authOptions) function in NextJS is returning null

What could be the reason for the discrepancy between my get_token() function and the value obtained from request.META.get("CSRF_COOKIE")?

How can a method be called from a sibling component in Angular when it is bound through the <router-outlet>?

Experience the convenience of lazy-loading in Angular Ivy: The InjectionToken ng-select-selection-model provider is not available

What is the best way to incorporate node_module during the iOS build process in Ionic 2?

Encountering a glitch when attempting to run Bootstrap 4 on an Angular 6 Application

Retrieve the non-empty attributes of a JSON object

Sending a parameter to a route guard

What is the process for implementing angular-material's pre-defined theme variables in component styling?

Learn how to incorporate the dynamic array index value into an Angular HTML page

Contrasting covariant and contravariant positions within Typescript

When someone visits a site using Next.js, the redirect feature may successfully load the site, but it fails to actually

Set certain properties within the nested object to be optional

Guide to implementing validation in an angular 2 dropdown using the Model-driven Approach

Access Denied: Origin not allowed

Broadcast the latest N occurrences

Guide to making a Material Design Radial effect animation

Error in zone: 140 - Property 'remove' is not readable