Angular table - display hidden element onClick

Question

I have a column in a table that has an input field, I only want to show the input when the button is clicked. I was using ng-if to display when clicked, however when the button is clicked, all of the input elements display. I only want the input for a row to display.

HTML

    <td *ngIf="!hideStockLevels && row.">
      <div>
        <button class="btn btn-primary" (click)="showInput(row)">Add unit</button>
      </div>
    </td>

    <td *ngIf="!hideStockLevels && !this.isButtonVisible" [hidden]="this.isButtonVisible">
     <input (focusout)="updateUnit(row)" class="inputWidth" [(ngModel)]="unitMap[row.id]" type="text"  value="{{row.Unit}}" [disabled]="dateReceived !== null">
     </td>

Answer 1

Each row needs to have an unique identifier so we know which row to show/hide. You are using just on variable. Add another (boolean) property to each object, which you toggle on click, for example:

<td>
   <button (click)="row.hidden = !row.hidden">Add unit</button>
</td>

<td [hidden]="row.hidden">
  <input .... />
</td>

I don't know how you toggle when input should be hidden, but then just switch the hidden property to false, when you want to do that.