CODEWITHSUNDEEP
javascriptangulartypescript
MARK
MARK

Reputation: 75

When checking a checkbox all the others get checked in angular

I have a table where I display some data in my angular 11 app with a check box next to each row, for some reason when I check a checkbox all the checkboxes get checked too, I tried adding an id to it but it did not work, how can I fix this issue?

Here is the code I used :

<table
  class="
    table
    is-hoverable is-narrow is-striped is-fullwidth
    content-table
    mt-6
  "
>
  <thead>
    <tr>
      <th></th>
      <th>{{ "ReporHist.FileName" | translate }}</th>
      <th>{{ "ReporHist.NumberRecords" | translate }}</th>
      <th>
        <span class="icon-text" (click)="sort('createdAt')">
          <span class="button icon is-primary">
            <i
              class="fas fa-angle-down"
              [ngClass]="{ arrowClicked: isArrowClicked }"
            ></i>
          </span>
          <span>{{ "ReporHist.UploadDate" | translate }}</span>
        </span>
      </th>
      <th>Action</th>
    </tr>
    <tr></tr>
  </thead>
  <tbody>
    <tr
      *ngFor="
        let row of FilteredDataSource
          | paginate: { itemsPerPage: itemsPerPage, currentPage: p };
        let i = index
      "
    >
      <td>
        <fa-icon [icon]="faFileCsv" size="4x"></fa-icon>
      </td>
      <td style="vertical-align: middle">
        {{ row.fileName }}
      </td>
      <td style="vertical-align: middle">{{ row.NumberRecords }}</td>
      <td style="vertical-align: middle">
        {{ row.createdAt.split("T")[0] }}
        {{ row.createdAt.split("T")[1].split(".")[0] }}
      </td>
      <td style="vertical-align: middle">
        <input
          #inputElement
          (change)="check($event, inputElement, row)"
          [name]="i"
          [id]="i"
          type="checkbox"
          [checked]="isChecked"
          class="has-text-centered"
        />
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Views: 2002

Answers (1)

eko
eko

Reputation: 40677

It's probably because they are all bound to [checked]="isChecked". You can create a map and put the values with respect to the ngFor index.

Example:

isCheckedMap = {};

check($event, inputElement, row, i) {
  ...
  this.isCheckedMap[i] = !this.isCheckedMap[i]; // toggle the value based on index
}

<input
  #inputElement
  (change)="check($event, inputElement, row, i)"
  [name]="i"
  [id]="i"
  type="checkbox"
  [checked]="isCheckedMap[i]"
  class="has-text-centered"
/>

Stackblitz example

Upvotes: 1

Related Questions