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

Question

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": "TOTO.lim@bermwood.com",
            "primaryContactPhone": "12312312",
        },
        {
            "id": 726,
            "primaryContactName": "Radley",
            "primaryContactEmail": "rob.comtest",
            "primaryContactPhone": "972-523-1052",
        },
        {
            "id": 736,
            "primaryContactName": "test2",
            "primaryContactEmail": "testmail@gmail.com",
            "primaryContactPhone": "2423423",
        },
        {
            "primaryContactName": "test",
            "primaryContactEmail": "testmail@gmail.com",
            "primaryContactPhone": "2423423",
        }
    ]

You are never setting the `[checked]` property of your ``. I don't understand how you expect it to remember its state — Ruan Mendes, Apr 25 '22 at 13:27
what would be the value of checked? like based on what variable ? — , Apr 25 '22 at 13:31
You are storing whether each checkbox is checked, use that to set `[checked]`. For example, create a function `shouldBeChecked(contact)` and use it like ` — Ruan Mendes, Apr 25 '22 at 13:50
what would be inside shouldBeChecked ? can you post an answer so I can upvote. Thanks. — , Apr 25 '22 at 13:51
and how does that affect the display of data based on selectedContactTobeEdited ? — , Apr 25 '22 at 13:51
Your post has multiple problems. It's preferable to focus on a single problem. How to remove a single item and how to keep the checked state of a mat-checkbox. Mentioning multiple problems makes it hard to find one right answer and makes your question less useful to others. See https://meta.stackexchange.com/questions/222735/can-i-ask-only-one-question-per-post — Ruan Mendes, Apr 25 '22 at 14:04

score 0 · Answer 1 · answered Apr 25 '22 at 14:02

0

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);
  }
}

answered Apr 25 '22 at 14:02

Ruan Mendes

90,375
31
153
217

what do you mean by that line ' // You forgot the 1 here ?? – Apr 25 '22 at 14:04
1

Do you not see the number `1` being passed to `splice` which you had not done? See https://stackoverflow.com/questions/5767325/how-can-i-remove-a-specific-item-from-an-array – Ruan Mendes Apr 25 '22 at 14:06
how does the index being determine ? what If I check 3 checkboxes and then uncheck the two , or on those scenarios ? – Apr 25 '22 at 14:12

score 0 · Accepted Answer · answered Apr 25 '22 at 15:52

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

contacts = [
        {
            "id": 735,
            "primaryContactName": "adadasd",
            "primaryContactEmail": "TOTO.lim@bermwood.com",
            "primaryContactPhone": "12312312",
        },
        {
            "id": 726,
            "primaryContactName": "Radley",
            "primaryContactEmail": "rob.comtest",
            "primaryContactPhone": "972-523-1052",
        },
        {
            "id": 736,
            "primaryContactName": "test2",
            "primaryContactEmail": "testmail@gmail.com",
            "primaryContactPhone": "2423423",
        },
        {
            "primaryContactName": "test",
            "primaryContactEmail": "testmail@gmail.com",
            "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);
}

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

2 Answers2