'angular multi select box (removing and selecting item) from an array objects

Good day . I have a question. I have an existing list of array of object contacts and user can add contacts to the array some have ID and some dont have ID .

The contacts array of objects will be the list of item that user can select on (the list of checboxes) . It should display the selected items of the list (multiple or single ) and if the user uncheck it will remove the select items.

How do we remove items from it when some of the object has no unique key like ID ?

But my issue is it does not remove the items from the selected when I try to uncheck. I tried using this.selectedContactTobeEdited.splice(index); but it still not working or removing the item.

Help would be much appreciated. Thanks.

#html code

 <mat-card *ngFor="let c of contacts;let i = index" class="contact-person-card">
          <div class="contact-person">
              <mat-checkbox (change)="selectedContact(c, $event, i)" class="mat-checkbox margin-top" color="primary">
              </mat-checkbox>
              <mat-icon class="material-icons user-icon margin-top">person</mat-icon>
              <div class="contact-info" >
                  <div class="contact-info-margin-top contact-name">{{c.primaryContactName}}</div>
                  <div class="contact-info-margin-top text-dark">{{c.primaryContactPhone}}</div>
                  <div class="contact-info-margin-top text-dark" style="padding-bottom:20px;">{{c.primaryContactEmail}}</div>
              </div>
          </div>
      </mat-card>

//diplay selected item here

    <div *ngFor="let s of selectedContactTobeEdited;let i = index;" class="p-label">
        <div class="contact-name">{{s.primaryContactName}}</div>
      </div>

#ts code

selectedContact(item: any,event , index:any) {
    if(event.checked) {
      this.selectedContactTobeEdited.push(item);
    }else {
      this.selectedContactTobeEdited.splice(index);
    }
  }

#list of contacts the one I am looping

  contacts = [
        {
            "id": 735,
            "primaryContactName": "adadasd",
            "primaryContactEmail": "[email protected]",
            "primaryContactPhone": "12312312",
        },
        {
            "id": 726,
            "primaryContactName": "Radley",
            "primaryContactEmail": "rob.comtest",
            "primaryContactPhone": "972-523-1052",
        },
        {
            "id": 736,
            "primaryContactName": "test2",
            "primaryContactEmail": "[email protected]",
            "primaryContactPhone": "2423423",
        },
        {
            "primaryContactName": "test",
            "primaryContactEmail": "[email protected]",
            "primaryContactPhone": "2423423",
        }
    ]

Solution 1:^[1]

I would suggest to add another property in your Contacts array.

contacts = [
        {
            "id": 735,
            "primaryContactName": "adadasd",
            "primaryContactEmail": "[email protected]",
            "primaryContactPhone": "12312312",
        },
        {
            "id": 726,
            "primaryContactName": "Radley",
            "primaryContactEmail": "rob.comtest",
            "primaryContactPhone": "972-523-1052",
        },
        {
            "id": 736,
            "primaryContactName": "test2",
            "primaryContactEmail": "[email protected]",
            "primaryContactPhone": "2423423",
        },
        {
            "primaryContactName": "test",
            "primaryContactEmail": "[email protected]",
            "primaryContactPhone": "2423423",
        }
    ]

this.contacts.map((_contact)=>_contact.isSelected = false);

And in the html

 <mat-card *ngFor="let c of contacts;let i = index" class="contact-person-card">
          <div class="contact-person">
              <mat-checkbox [checked]="c.isSelected" (change)="c.isSelected=!c.isSelected" class="mat-checkbox margin-top" color="primary">
              </mat-checkbox>
              <mat-icon class="material-icons user-icon margin-top">person</mat-icon>
              <div class="contact-info" >
                  <div class="contact-info-margin-top contact-name">{{c.primaryContactName}}</div>
                  <div class="contact-info-margin-top text-dark">{{c.primaryContactPhone}}</div>
                  <div class="contact-info-margin-top text-dark" style="padding-bottom:20px;">{{c.primaryContactEmail}}</div>
              </div>
          </div>
      </mat-card>

And for showing the selected contacts

<div *ngFor="let s of getSelectedContacts();let i = index;" class="p-label">
        <div class="contact-name">{{s.primaryContactName}}</div>
      </div>

getSelectedContacts(){
     return this.contacts.filter(_contact=> _contact.isSelected);
}

Solution 2:^[2]

You are not telling Angular whether a box should be checked using [checked].

I suggest you create a method

shouldBeChecked(contact) {
  return this.selectedContactTobeEdited.includes(contact);
}

And use

<mat-checkbox [checked]="shouldBeChecked(c)" ... >

You have one more error: to remove on item from an array, you should use splice(index, 1)

selectedContact(item: any,event , index:any) {
  if(event.checked) {
    this.selectedContactTobeEdited.push(item);
  } else {
    // You forgot the 1 here
    this.selectedContactTobeEdited.splice(index, 1);
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Nimitt Shah
Solution 2	Juan Mendes

'angular multi select box (removing and selecting item) from an array objects

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]