I have a angular material table with check box row. Material Table Based on check and unchecked i want to manipulate other field from selected checkbox row value.
asked Sep 30, 2018 at 14:00
Mohammad Atiour Islam
5,7783 gold badges46 silver badges49 bronze badges
Add a comment
|
2 Answers
You need to add another attribute to PeriodicElement.
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
selectedName: string;
}
After that you create a function to manage selection:
toggleCheckbox(row) {
this.selection.toggle(row);
row.selected = !row.selected;
}
Here is your modified code:
https://stackblitz.com/angular/lrpjroljdly?embed=1&file=app/table-selection-example.html
Comments
You need to maintain Unique ID for each row, lets says here is sample Array of Object used for displaying Table.
public tables = [{
id: 1,
username: 'xxxxx',
password: 'xxxxxx',
checked: false
}, {
id: 2,
username: 'xxxxx',
password: 'xxxxxx',
checked: false
}, {
id: 3,
username: 'xxxxx',
password: 'xxxxxx',
checked: false
}]
When user select/unselect checkbox, you need to call a function with (click) event to the Checkbox and pass the column/id for that Row.
Template:
<input type="checkbox" id="{{id}}" name="feature{{id}}"
value="{{column.id}}" [checked]="column.checked" ([ngModel])="column.checked" (click)="validate(column, $event)">
Inside Component:
validate(id, column, event ){
column.checked = !column.checked;
console.log(column.id); // using this value, you can perform logic with tables array.
}
