Example of saving changes to an API

[tedtally]

Can you provide an example of data changes being saved via Put/Post/Delete? Based on the demo I can make changes in the form but those changes aren't permanent.
As a newbie this table looks great and is pretty easy to integrate when it comes to initially populating the table via Http(Get). However, being a newbie ... if I need to permanently save my changes (new, edit or delete) how would can I call my service? Do I have to extend TableDataSource or can it be done somewhere in the button (click) ?

[irossimoline]

Hi @tedtally ,

The main idea of this package is to keep easy to integrate with any logic you want to. In this particular case, I can suggest you the following approach:

In component.html file:

<mat-table [dataSource]="dataSource">
  <!-- data rows here -->
  <ng-container matColumnDef="actionsColumn">
    <mat-header-cell *matHeaderCellDef>
      <!-- Header, can contain a Add new button -->
    </mat-header-cell>
    <mat-cell fxFlex="80px" *matCellDef="let row">
        <button *ngIf="row.editing" (click)="createOrEditConfirm(row)">
          <!-- this can contain a confirm icon -->
        </button>
    </mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

In component.ts file (inside the component class):

createOrEditConfirm(row: TableElement<YourElementType>) {
    // if you are using row validation.
    if (row.validator.valid) {
      // Here you call your post/put logic.
      createOrUpdateElementAgainstAPI(row.currentData).then((result) => {
        // finally you confirm the changes against the table.
        row.confirmEditCreate();
      });
    }
  }

Similar approach can be used to delete the row.

[tedtally]

Awesome!!! Thank you so much. This had me stumped.