Material Angular Table row cell render(calculate) conditonally when checkbox is checked in Angular 13

Question

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],

    });
  }
}

Answer 1

you need add a property to every object example [checked] and with this controlling row is selected or not

 import { Component } from '@angular/core'; /** * @title Basic table */ @Component({ selector: 'table-basic-example', styleUrls: ['table-basic-example.css'], templateUrl: 'table-basic-example.html', }) export class TableBasicExample { displayedColumns = ['checked', 'position', 'name', 'weight', 'symbol']; dataSource = ELEMENT_DATA; } export interface Element { checked: boolean; name: string; position: number; weight: number; symbol: string; highlighted?: boolean; hovered?: boolean; } const ELEMENT_DATA: Element[] = [ { checked: false, position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' }, { checked: false, position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' }, { checked: false, position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' }, { checked: false, position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' }, { checked: false, position: 5, name: 'Boron', weight: 10.811, symbol: 'B' }, { checked: false, position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' }, { checked: false, position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' }, { checked: false, position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' }, { checked: false, position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' }, { checked: false, position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' }, { checked: false, position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na' }, { checked: false, position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg' }, { checked: false, position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al' }, { checked: false, position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si' }, { checked: false, position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P' }, { checked: false, position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S' }, { checked: false, position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl' }, { checked: false, position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar' }, { checked: false, position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K' }, { checked: false, position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca' }, ]; /** Copyright 2018 Google Inc. All Rights Reserved. Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at http://angular.io/license */

 .example-container { display: flex; flex-direction: column; max-height: 500px; min-width: 300px; }.mat-table { overflow: auto; max-height: 500px; }

 <div class="example-container mat-elevation-z8"> <mat-table #table [dataSource]="dataSource"> <.--- Note that these columns can be defined in any order. The actual rendered columns are set as a property on the row definition" --> <.-- Position Column --> <ng-container matColumnDef="checked"> <mat-header-cell *matHeaderCellDef>Check</mat-header-cell> <mat-cell *matCellDef="let element"> <mat-checkbox [(ngModel)]="element.checked"></mat-checkbox> </mat-cell> </ng-container> <.-- Position Column --> <ng-container matColumnDef="position"> <mat-header-cell *matHeaderCellDef> No. </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell> </ng-container> <.-- Name Column --> <ng-container matColumnDef="name"> <mat-header-cell *matHeaderCellDef> Name </mat-header-cell> <mat-cell *matCellDef="let element"> {{element;name}} </mat-cell> </ng-container> <:-- Weight Column --> <ng-container matColumnDef="weight"> <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell> <mat-cell *matCellDef="let element"> <ng-container *ngIf="element;checked"> {{element:weight}} </ng-container> </mat-cell> </ng-container> <.-- Symbol Column --> <ng-container matColumnDef="symbol"> <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell> <mat-cell *matCellDef="let element"> {{element,symbol}} </mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-row *matRowDef="let row: columns. displayedColumns." [ngClass]="{hovered. row.hovered. highlighted: row.highlighted}" (mouseover)="row.hovered = true" (mouseout)="row.hovered = false"></mat-row> </mat-table> </div> <!-- Copyright 2018 Google Inc. All Rights Reserved. Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at http://angular.io/license -->