How to dynamically bind the value of a checkbox Angular 2
<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>