title: How to dynamically bind the value of a checkbox Angular 2
body: <p>Hi all: I have a component. The component view has a table:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;h2&gt;Recipients List&lt;/h2&gt;
  &lt;br&gt;
  &lt;table class="table table-striped"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Id&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Phone&lt;/th&gt;
              &lt;th&gt;Status&lt;/th&gt;
              &lt;th&gt;Select&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr *ngFor="#rp of arrAll"&gt;   
              &lt;td&gt;{{rp.id}}&lt;/td&gt;             
              &lt;td&gt;{{rp.name}}&lt;/td&gt;
              &lt;td&gt;{{rp.phone}}&lt;/td&gt;                
              &lt;td&gt;{{rp.isActivated?'Active':'Inactive'}}&lt;/td&gt;             
              &lt;td&gt;
                  &lt;input #{{rp.id}}  type="checkbox" (change)="checkbox(value)"&gt;
              &lt;/td&gt;
          &lt;/tr&gt;          
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;button class="btn btn-success" (click)="newRecipient()"&gt;New Recipient&lt;/button&gt;
  &lt;button class="btn btn-danger pull-right" (click) ="deleteRecipients()"&gt;Delete Recipients&lt;/button&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is a link to an image of the <a href="https://i.stack.imgur.com/eLGe9.png" rel="nofollow noreferrer">table view</a> which was generated using *ngFor.</p>
  
  <p>The business logic is "When the delete button is clicked all the checked recipients must be deleted". I want to pass a parameter to my delete function (which I think should be an array containing the checked recipient ids) <br> </p>
  
  <p>Here is my component code:</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {CORE_DIRECTIVES} from 'angular2/common';
  import { Router, RouteParams } from 'angular2/router';
  import {RecipientsService}    from'../../services/recipients/recipients.service';
  import {Recipient} from '../../models/recipient/recipient';
  
  @Component({
  selector: 'recipient-list-view',
  templateUrl: './app/components/recipient-list-view/recipient-list-view.html',
  styleUrls: ["./app/components/recipient-list-view/style.css"]
  })
  
  export class RecipientListViewComponent {
  
  arrAll: Recipient[];
  
  constructor(private recipientsService: RecipientsService, params:    RouteParams, private router: Router) {
      this.arrAll = recipientsService.getAll();        
  }
  
  newRecipient() {
      this.router.navigate(['../NewRecipient']);
  }
  
  deleteRecipients() {  //need to know which recipients are checked
  
      console.log("delete");
  }
  
  
  }
  </code></pre>
  
  <p>I would like to know how to achieve this.</p>
  
  <p>Cheers</p>