How to reset value from an array, OnClick to a button?

Question

I am using Tabulator to generate a table. When a table cell is clicked, I am pushing the cell values to an array, initial value for each item in the array is '0'. I would like to implement a reset button that will reset the assigned value to '0' onClick to the reset button or anywhere in window.

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)}]

Assuming there's only one row of data, the following function pushes the firstField, and secondField's data to names[0].val and names[1].val.

     getValue(e, row) {
          this.names[0].val = row.getData().firstField
          this.names[1].val = row.getData().secondField

     }

component.html

I want to implement a function or button that will clear the [(ngmodel)] value when user click anywhere in window or 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>

Answer 1

Add a button in your HTML,

<button (click)="resetNameValues()">Reset</button>

Define the function in TS,

resetNameValues(){
    // Iterate over name array and set val to 0
    this.names.forEach(
        name => name.val=0
    )
}