Using Tabulator to create a table, where clicking on a cell pushes the cell values to an array with initial value of '0'. The goal is to add a reset button that sets the values back to '0' when clicked.
component.ts
names = [{name: first, val: void 0},{name: second, val: void 0}]
tabulatorColumnName = [{title: firstTitle, field: firstField, cellClick:
this.getValue.bind(this)}
{title: secondTitle, field: secondField,
cellClick:this.getValue.bind(this)}]
For a single row of data, the function getValue(e, row) assigns the data from firstField and secondField to names[0].val and names[1].val respectively.
getValue(e, row) {
this.names[0].val = row.getData().firstField
this.names[1].val = row.getData().secondField
}
component.html
An implementation is needed to clear the [(ngmodel)] value when a user clicks anywhere in the window or on a button.
<form (ngSubmit)="saveChild(sideToggleForm)"
#sideToggleForm="ngForm">
<div *ngFor="let name of names">
<div class="{{ name.type }}">
<small>{{ name.label }}</small>
<mat-form-field class="full-width" appearance="outline">
<input
name="{{ name.name }}"
matInput
[(ngModel)]="name.val"
/>
</mat-form-field>
</div>
</div>
</form>