Hi all: I have a component. The component view has a table:
<div class="container">
<h2>Recipients List</h2>
<br>
<table class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Phone</th>
<th>Status</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr *ngFor="#rp of arrAll">
<td>{{rp.id}}</td>
<td>{{rp.name}}</td>
<td>{{rp.phone}}</td>
<td>{{rp.isActivated?'Active':'Inactive'}}</td>
<td>
<input #{{rp.id}} type="checkbox" (change)="checkbox(value)">
</td>
</tr>
</tbody>
</table>
<button class="btn btn-success" (click)="newRecipient()">New Recipient</button>
<button class="btn btn-danger pull-right" (click) ="deleteRecipients()">Delete Recipients</button>
Here is a link to an image of the table view which was generated using *ngFor.
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)
Here is my component 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");
}
}
I would like to know how to achieve this.
Cheers
Add a property selected
to your recipient. On the checkbox change, put it as true.
Once the user clicks delete all recipients, just filter the list for the ones who are selected.
Something like this:
<div class="container">
<h2>Recipients List</h2>
<br>
<table class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Phone</th>
<th>Status</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr *ngFor="#rp of arrAll">
<td>{{rp.id}}</td>
<td>{{rp.name}}</td>
<td>{{rp.phone}}</td>
<td>{{rp.isActivated?'Active':'Inactive'}}</td>
<td>
<input #{{rp.id}} [(ngModel)]="rp.selected" type="checkbox" (change)="checkbox(rp)">
</td>
</tr>
</tbody>
</table>
<button class="btn btn-success" (click)="newRecipient()">New Recipient</button>
<button class="btn btn-danger pull-right" (click) ="deleteRecipients()">Delete Recipients</button>
</div>
And the component:
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
let selected = this.arrAll.filter((x) => x.selected)
console.log(selected);
}
checkbox(recipient) {
recipient.selected = (recipient.selected) ? false : true;
}
}
If you can add one more property to your "Recipient" model, then is very much easy to track the selected records.
Added a "selected" property in your Recipient model and two way bind the checkbox to selected property.
<input #{{rp.id}} type="checkbox" [(ngModel)]="rp.selected">
Now add a method in the component to get all selected records
private getSelected() {
return this.arrAll.filter((item) => item.selected);
}
Then get the selected records
deleteRecipients() {
console.log(this.getSelected());
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With