Adding the checked value to an array in Angular2 whenever an item is checked

Question

Adding the checked value to an array in Angular2 whenever an item is checked

One of my components is set up to receive an object containing employee records and display them in a table. Each record includes a checkbox that allows users to "select" the employee for inclusion in the next process.

<tr *ngFor="let i of importResults" >
 <td>
  <input type="checkbox"
         value="{{ i.QID }}"
         attr.data-employeename="{{ i.PreferredName }} {{ i.LastName }}"
         [checked]="isSelected" />
  </td>
  <td>{{ i.PreferredName }} {{ i.LastName }}</td>
</tr>

To manage this selection, I have created an array called selectedEmployees = [];. The idea is that when a user clicks on a checkbox, its value should be added to the array. Similarly, if the checkbox is unchecked, the value should be removed from the array.

I initially tried using ngModel for two-way binding, but encountered issues due to the lack of an initial checked value in the object. Is there a better approach to achieving this functionality?

While exploring solutions, I came across a related question on Stack Overflow, but encountered an error in Typescript regarding the use of .entries. Could this be due to compatibility issues with older versions of Angular?

angular typescript

Answer 1

Answer №1

If you want to implement a feature where clicking on a checkbox triggers an action to add or remove an item, you can achieve this by adding a `click` event to the checkbox element and passing it to a function for handling.

Here is an example of how you can set up your HTML:

<div *ngFor="let i of importResults" >
 <div>
  <input type="checkbox"
         value="{{ i.QID }}"
         (click)="change(i)"/>
   <span>{{ i.PreferredName }} {{ i.LastName }}</span>
  </div>
</div>

<p> Selected Employee: {{selectedEmployees | json}} </p>

In your component.ts file, you can have the following code snippet:

export class SelectFormExample {
  selectedEmployees = [];

  showSiblingComp = false;

  importResults = [
    {QID: "1", PreferredName: 'Steak', LastName: "Pizza"},
    {QID: "2", PreferredName: 'Cheese', LastName: "Burger"},
    {QID: "3", PreferredName: 'Chicken', LastName: "Panini"}
  ];

  constructor(private service: SharedService){

  }

  change(obj){

    let updateItem = this.selectedEmployees.find(this.findIndexToUpdate, obj.QID));

    let index = this.selectedEmployees.indexOf(updateItem);

    console.log(index);

    if(index > -1){
      this.selectedEmployees.splice(index, 1);
    }
    else{
      this.selectedEmployees.push(obj);
    }

    this.service.setList(this.selectedEmployees);

  }

  findIndexToUpdate(obj) { 
        return obj.QID === this;
  }
}

You can view a demo of this implementation here.

This demo also includes sharing the `selectedEmployees` data with a sibling component using a shared service.

Answer 2

If you want to implement a feature where clicking on a checkbox triggers an action to add or remove an item, you can achieve this by adding a `click` event to the checkbox element and passing it to a function for handling.

Here is an example of how you can set up your HTML:

<div *ngFor="let i of importResults" >
 <div>
  <input type="checkbox"
         value="{{ i.QID }}"
         (click)="change(i)"/>
   <span>{{ i.PreferredName }} {{ i.LastName }}</span>
  </div>
</div>

<p> Selected Employee: {{selectedEmployees | json}} </p>

In your component.ts file, you can have the following code snippet:

export class SelectFormExample {
  selectedEmployees = [];

  showSiblingComp = false;

  importResults = [
    {QID: "1", PreferredName: 'Steak', LastName: "Pizza"},
    {QID: "2", PreferredName: 'Cheese', LastName: "Burger"},
    {QID: "3", PreferredName: 'Chicken', LastName: "Panini"}
  ];

  constructor(private service: SharedService){

  }

  change(obj){

    let updateItem = this.selectedEmployees.find(this.findIndexToUpdate, obj.QID));

    let index = this.selectedEmployees.indexOf(updateItem);

    console.log(index);

    if(index > -1){
      this.selectedEmployees.splice(index, 1);
    }
    else{
      this.selectedEmployees.push(obj);
    }

    this.service.setList(this.selectedEmployees);

  }

  findIndexToUpdate(obj) { 
        return obj.QID === this;
  }
}

You can view a demo of this implementation here.

This demo also includes sharing the `selectedEmployees` data with a sibling component using a shared service.

Adding the checked value to an array in Angular2 whenever an item is checked

Answer №1

Similar questions

Issues with the radio-inline class in Angular and Bootstrap causing functionality errors

Confirm the identity of a user by checking their email against the records stored in a MySQL database

Subscriber fails to receive updates from Behavior subject after calling .next(value)

Radio buttons with multiple levels

Getting a precise element from an array in JSON using Angular 5

What is the procedure for including a attribute in all sub-objects within a nested object using Typescript?

Tips for creating an interface that dynamically expands according to a component's properties

Can ES6 class getters, setters, and private properties be utilized in TypeScript with an interface?

Is there a way to obtain a unique response in TestCafe RequestMock?

Creating an observable in rxjs6 Angular6 that automatically unsubscribes itself

Managing background tasks with Node.js in real-time

Navigating the "this" scope within a callback function while in strict mode

The search for d.ts declaration files in the project by 'typeRoots' fails

Adjusting the ng-turnstile Dimensions

"Troubleshooting: Issues arise with Kendo UI Angular file upload component when dealing with

Using async await with Angular's http get

Include new item to the Observable array in TypeScript

In Typescript, an interface is defined where the "id" property is required to be a number, while all other properties must be of

Unable to retrieve the regex value with an alternate label

"Problems with auto-import feature in VSCode for a new and tidy Angular project