How can I achieve that the result calculated(not rendered) only when the checkbox in the row checked in angular-material-table.(See on pic)Otherwise it has to be blank. Its just a simple multiplier operation. I have no idea how can I get a connection in each row to the checkbox checked property.
My html:
<mat-form-field appearance="standard">
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="cb">
<th mat-header-cell *matHeaderCellDef mat-sort-header> CheckBox </th>
<td mat-cell *matCellDef="let row"> <mat-checkbox ></mat-checkbox> </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let row"> {{row.name}} </td>
</ng-container>
<ng-container matColumnDef="a">
<th mat-header-cell *matHeaderCellDef mat-sort-header> A </th>
<td mat-cell *matCellDef="let row"> {{row.a}} </td>
</ng-container>
<ng-container matColumnDef="b">
<th mat-header-cell *matHeaderCellDef mat-sort-header> B </th>
<td mat-cell *matCellDef="let row"> {{row.b}} </td>
</ng-container>
<ng-container matColumnDef="result">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Result </th>
<td mat-cell *matCellDef="let row"> {{row.a * row.b}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
</tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
</div>
Components.ts:
import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
export interface InputData {
id: number;
name: string;
a: number;
b: number;
}
@Component({
selector: 'app-root',
styleUrls: ['app.component.css'],
templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
displayedColumns: string[] = ['cb', 'name', 'a', 'b', 'result'];
dataSource: MatTableDataSource<InputData>;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
public myForm: FormGroup;
public labels = [27, 20, 5];
public actualVat: number = 27;
constructor(private fb: FormBuilder) {
const vmi = [{id: 1, name: 'first', a: 20, b: 1.1}, {id: 1, name: 'second', a: 35, b: 1.7},];
this.dataSource = new MatTableDataSource(vmi);
}
onFormSubmit() {
if (this.myForm.valid) {
this.actualVat = this.myForm.value.category;
console.log(this.actualVat);
} else {
return;
}
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
ngOnInit(): void {
this.myForm = this.fb.group({
category: [27, Validators.required],
});
}
}
