CODEWITHSUNDEEP
angularangular-material
Mohammad Atiour Islam
Mohammad Atiour Islam

Reputation: 5708

Angular Material table checkbox row value on check

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.

Upvotes: 2

Views: 17922

Answers (2)

Eugenio Valeiras
Eugenio Valeiras

Reputation: 1000

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

Upvotes: 5

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9754

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.

}

Upvotes: 0

Related Questions