Reset item checked after close modal

Question

In my modal all my items are uncheck in the first opening, When I check item(s),close modal and reopen it I want all my items will uncheck like the first opening. Now When I check item and reopen the modal, this item stay checked. What can I do to resolve this problem?

Modal parent.component.html

<app-modal [show]="showModal" [customClass]="'custom_modal_class'" [closeCallback]="closeWithoutSending">

            <div class ="body">
                <div class="header">  
                    <br>
                    <input type="textarea" placeholder="Type your message here..." [(ngModel)]="userContent"> &nbsp;
                    <br>
                    <label class="btn btn-default">
                        <input type="file" hidden (change)="pickFile($event)">
                    </label>
                    <button (click)="toggleModal()">
                        <span>Envoyer</span>
                    </button>
                    <br>
                </div>

                <div class="content">
                    <app-contact  (contactEventEmitter)="onCheckContact($event)"           
                    *ngFor="let contact of contacts; let i = index"
                      [indexOfContact]="i"
                      [contactName] ="contact.itemName"
                      [(contact)]="contact"
                      >
                    </app-contact>
                </div>
                <br>
                <div class="content">
                    <app-groupe (groupEventEmitter)="onCheckGroup($event)"              
                    *ngFor="let group of groups; let i = index"
                    [indexOfGroup]="i"
                    [groupName] ="group.itemName"
                    [group] ="group" >
                    </app-groupe>
                </div> 

            </div>               





        </app-modal> 

parent.component.js

....  

    onCheckContact(contact) {

       if (!this.selectedContacts.includes(contact)) {
            this.selectedContacts.push(contact);
        } else {

          for(let i in this.selectedContacts){
            if(this.selectedContacts[i].phone === contact.phone){
              var index = this.selectedContacts.indexOf(this.selectedContacts[i]);
              console.log('index '+index+' i '+i);
              if (index > -1) {
                this.selectedContacts.splice(index, 1);
              } 
            }
          }

        }
          for(let i in this.selectedContacts){
            console.log(' Selected  i '+i+' Contacts name '+this.selectedContacts[i].itemName+' phone '+this.selectedContacts[i].phone);
          }
         // alert('Selected Contacts '+this.selectedContacts);

        }

....


closeWithoutSending = () => {
  this.showModal = !this.showModal;
  this.selectedContacts = [];
}

Child component:

contact.component.html:

<div class="head">

    <div class="item-checkbox">
        <label>{{ contact.itemName }}<input type="checkbox" class="custom-control-input" id= "indexOfContact" [(checked)]="contact.selected" (change)="onCheckContact(contact)"></label>
      </div>
</div>

contact.component.js

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Contact } from '../models/Contact.model';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.scss']
})
export class ContactComponent implements OnInit {
  @Input() contactName: string;
  @Input() indexOfContact: number;
  @Input()contact:Contact;
  @Output() contactEventEmitter = new EventEmitter<string>();
  @Input() selected:boolean;

  constructor() { }

  ngOnInit() {


  }

  onCheckContact(contact) {
        console.log(' Selected  Contact '+contact.itemName);
        this.contactEventEmitter.emit(contact);
        this.selected = true;

    }

}

Answer 1

Try changing:

closeWithoutSending = () => {
  this.showModal = !this.showModal;
  this.selectedContacts = [];
}

to this:

closeWithoutSending = () => {
  this.showModal = !this.showModal;
  this.selectedContacts.forEach(c => c.selected = false);
  this.selectedContacts = [];
}

Objects are passed via reference from Parent to Child. So if want it cleared, you might have to reset the data.

Answer 2

@Ayush Walia I tried also

parent

<app-contact  (contactEventEmitter)="onCheckContact($event)"           
                        *ngFor="let contact of contacts; let i = index"
                          [indexOfContact]="i"
                          [contactName] ="contact.itemName"
                          [(contact)]="contact"
                          [selected]="false"
                          >
                        </app-contact>

and child

<div class="item-checkbox"> <label>{{ contact.itemName }}<input type="checkbox" class="custom-control-input" id= "indexOfContact" [(checked)]="selected" (change)="onCheckContact(contact)"></label> </div>