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>

A boolean value - but I'm looking to only show one row when clicked — DZF
– DZF, Commented Jul 22, 2021 at 11:28
Can you put your code here stackblitz.com/edit/angular-ngif-click — Alireza Ahmadi
– Alireza Ahmadi, Commented Jul 22, 2021 at 11:28

AVJT82 · Accepted Answer · 2021-07-22 18:05:30Z

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.

answered Jul 22, 2021 at 18:05

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular table - display hidden element onClick

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related