title: How to pass the checked and unchecked value of checkboxes in component.ts file in angular?
body: <p>I have a checkbox which looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Jp3fh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jp3fh.png" alt="enter image description here"></a></p>
  
  <p>It is iterating through json data as :</p>
  
  <p><a href="https://i.stack.imgur.com/MCO99.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MCO99.png" alt="enter image description here"></a></p>
  
  <p>The code looks like :</p>
  
  <pre><code>&lt;div class="card-body"&gt;
     &lt;h5&gt;Document List&lt;/h5&gt;
     &lt;div class="form-check" *ngFor="let document of documents"&gt;
        &lt;label class="form-check-label" for="check1"&gt;
        &lt;input type="checkbox" class="form-check-input" id="check1"  [value]= "document.docId"
        name="document.docName" (click)="callMe(document.docId)" &gt;{{document.docName}}
        &lt;/label&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And i want operation like when the user selects the checkboxes then I tried to pass the id to the component.ts file.In this method <b>(click)="callMe(document.docId)"</b> if the boxes is checked then id is coming as in <b>component.ts</b> file is</p>
  
  <pre><code>callMe(id:any){
    console.log(id);
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/NNuO9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NNuO9.png" alt="enter image description here"></a></p>
  
  <p>But when i uncheck one of the checkbox the problem occuring is</p>
  
  <p>Fig 2.
  <a href="https://i.stack.imgur.com/PDpni.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PDpni.png" alt="enter image description here"></a></p>
  
  <p>document.ts file is:</p>
  
  <pre><code>export class Document {
  
      docId:number;
      docName:number;
  
  }
  </code></pre>