having an issue with my Angular project. Basically, I have a mat-table with 15 rows that contains some data. I added checkboxes at the end of the row so that when the checkbox is clicked, and then a button is pressed, it manipulates the data by calling an API (I will call the API once I figure out how to pass it the appropriate data)
The table data is generated like this:
HTML
<mat-table [dataSource]="dataSource$">
<ng-container matColumnDef="process">
<mat-header-cell #checkBox *matHeaderCellDef> Process </mat-header-cell>
<mat-cell *matCellDef="let execution"> {{execution.process}} </mat-cell>
</ng-container>
<ng-container matColumnDef="reprocess">
<mat-header-cell *matHeaderCellDef>
<button tslbutton class="tslbutton" (click)="reprocessHomeProcesses(checkBox)" id="reprocessButton">
Reprocess
</button>
</mat-header-cell>
<mat-cell id="reprocessCell" *matCellDef="let execution">
<mat-checkbox class="checker" #checkBox></mat-checkbox>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row #checkBox *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
TS
dataSource$ = new MatTableDataSource();
//on page load dataSource$ is populated with 15 objects. These are different each time
reprocessHomeProcesses(checkboxes) {
console.log(checkboxes))
}
I'm unable to access the data stored in "execution". In HTML I can view it by something like this:
<span>{{execution.process}}</span>
this returns the process field of the execution object.
but I cannot pass this data to the TS. I tried using #checkBox and passing that as an argument to reprocessHomeProcesses() but this returns undefined. Is there an easier solution to
All of the information that I need is in the execution variable. Basically, when the box is checked and the button is pressed, I need the execution data sent back to the TypeScript. But when I try to pass execution as the argument to my reprocessHomeProcesses() it returns as undefined, even though execution has the data that is creating the rows. Why is this happening?
Is it not possible to send execution from HTML to TS using the checkbox? I have had no luck in many hours.
Any help is appreciated.
In Angular (React, and VueJs) you not query the DOM direct with document.querySelector(...) (or similars).
These frameworks are data centered, what you need is define a public variable in your Controller to hold the data, and that variable will be updated by the 2-way data binding of Angular:
In the Template (HTML):
<mat-table [dataSource]="dataSource$">
<ng-container matColumnDef="process">
<mat-header-cell #checkBox *matHeaderCellDef> Process </mat-header-cell>
<mat-cell *matCellDef="let execution"> {{execution.process}} </mat-cell>
</ng-container>
<ng-container matColumnDef="reprocess">
<mat-header-cell *matHeaderCellDef>
<button tslbutton class="tslbutton" (click)="reprocessHomeProcesses()" id="reprocessButton">
Reprocess
</button>
</mat-header-cell>
<mat-cell id="reprocessCell" *matCellDef="let execution; let i = index">
<mat-checkbox class="checker" [(ngModel)]="auxiliarDataSource[i].checked"></mat-checkbox>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row #checkBox *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
Remove the parameter from "reprocessHomeProcesses", and put [(ngModel)]="execution.checked" on the "mat-checkbox"
In the Controller (TS), something like:
export class MyController {
dataSource: [
{ process: 1 },
{ process: 2 },
];
auxiliarDataSource: [
{ checked: false, index: 0 },
{ checked: false, index: 1 },
];
void reprocessHomeProcesses() {
let filteredIndex = this.auxiliarDataSource.filter(x => x.checked).map( x => x.index );
let filteredItens = this.dataSource.filter( (x,i)=> filteredIndex.indexOf(i) )
console.log( filteredItens );
}
// ... more code ahead
}
Code Not Tested