Angular material Editable table

Question

I am trying to achieve below screen using angular material.

Here is my code so far

html component code

<mat-card class="FactorAllocationCard">
  <mat-card-header>
    <mat-card-title>Allocate Factors</mat-card-title>
    <span class="spacer"></span>
    <button mat-raised-button color="primary">
      Save
    </button>
  </mat-card-header>
  <mat-divider></mat-divider>
  <mat-card-content>
    <div class="factalloctable">
      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
        <ng-container matColumnDef="Description">
          <th mat-header-cell *matHeaderCellDef>Factor</th>
          <td mat-cell *matCellDef="let element">{{ element.Description }}</td>
        </ng-container>
        <!-- Edit Update Column -->
        <ng-container matColumnDef="Action">
          <th mat-header-cell *matHeaderCellDef>
            Allocate
          </th>
          <td mat-cell *matCellDef="let element">
            <button mat-button>
              <mat-icon class="mat-icon-factor-def" color="primary"
                >remove_circle</mat-icon
              >
            </button>
            <mat-slider thumbLabel step="0.1" max="30" min="0" color="primary">
            </mat-slider>
            <mat-icon class="mat-icon-factor-def">add_circle</mat-icon>
          </td>
        </ng-container>
        <ng-container matColumnDef="Value">
          <th mat-header-cell *matHeaderCellDef>Allocated Value</th>
          <td mat-cell *matCellDef="let element">{{ element.Value }}</td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>
    </div>
  </mat-card-content>
</mat-card>

typescript code

import { Component, OnInit } from '@angular/core';
import { FactorsService } from './../../factors-services';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-factor-cat',
  templateUrl: './factor-cat.component.html',
  styleUrls: ['./factor-cat.component.css'],
})
export class FactorCatComponent implements OnInit {
  CurrentAllocation = [];

  constructor(public factorsservice: FactorsService) {}
  displayedColumns: string[] = ['Description', 'Action', 'Value'];
  dataSource = new MatTableDataSource(this.factorsservice.Choosen);
  ngOnInit(): void {}
}

I want to save only after the user make all allocations and press Save. Also value column needs to be updated when ever the user changes slider values. + and - at the end of the slider could be used to change the step value of the slider.

I searched a lot for similar kind of questions but couldn't find any.

Answer 1

Here you go.

https://stackblitz.com/edit/angular-fgyuy8?embed=1&file=src/app/table-basic-example.html

when saving data check console and method:

 saveData() {
    //or this.dataSource.data if you are going with new MatTableDataSource()
    console.log(this.dataSource);
  }