Angular Material table checkbox row value on check
Asked by Mckenna Casey onAnswer by Zahir Ballard
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. , Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers , Stack Overflow help chat , Stack Overflow Public questions & 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;
}
Answer by Eden Webster
Check out the API docs and examples of the mat-text-column to see how you can customize the header text, text alignment, and cell data accessor. Note that this is not compatible with the flex-layout table. Also, a data accessor should be provided if your data may have its properties minified since the string name will no longer match after minification.,Implement the behavior in your component's logic to handle the header's master toggle and checking if all rows are selected.,When using the multiTemplateDataRows directive to support multiple rows for each data object, the context of *matRowDef is the same except that the index value is replaced by dataIndex and renderIndex.,To start, create a variable in your component that contains the list of the columns you want to render.
The simplest way to provide data to the table is by passing a data array to the table's dataSource
input. The table will take the array and render a row for each object in the data array.
<table mat-table [dataSource]="myDataArray">
...
</table>
Here's a simple column definition with the name 'score'. The header cell contains the text
"Score" and each row cell will render the score property of each row's data.
<ng-container matColumnDef="score">
<th mat-header-cell *matHeaderCellDef> Score </th>
<td mat-cell *matCellDef="let user"> {{user.score}} </td>
</ng-container>
If your column is only responsible for rendering a single string value for the header and cells,
you can instead define your column using the mat-text-column. The following column definition is
equivalent to the one above.
<mat-text-column name="score"></mat-text-column>
To start, create a variable in your component that contains the list of the columns you want to render.
columnsToDisplay = ['userName', 'age'];
Then add mat-header-row and mat-row to the content of your mat-table and provide your
column list as inputs.
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let myRowData; columns: columnsToDisplay"></tr>
Answer by Tristan Peters
API reference for Angular Material table
import {MatTableModule} from '@angular/material/table';
import {MatTableModule} from '@angular/material/table';
