Retrieving the row value of a checkbox in an Angular table

Question

Retrieving the row value of a checkbox in an Angular table

I'm facing a challenge where I have a table with three columns, one of which is a checkbox. Here is an image for reference:

https://i.sstatic.net/4U6vP.png

Here is the code snippet:

<div nz-row>
    <nz-table nz-col nzSpan="22" [nzLoading]="loading"
              nzTitle="Assign a new role to the group" [nzData]="moduledata">
      <thead nzSingleSort>
        <thead>
          <tr>
            <th></th>
            <th nzShowSort nzSortKey="module">Module</th>
            <th nzShowFilter [nzFilters]="filterrole"
                (nzFilterChange)="updateFilter($event)">Role</th>
          </tr>
        </thead>
      <tbody>
        <tr *ngFor="let module of moduledata">
          <td nzShowCheckbox name='tableCheck' id='tableCheck'></td>
          <td>{{module.module}}</td>
          <td>{{module.role}}</td>
        </tr>
      </tbody>
    </nz-table>
  </div>

Here is the expected result to be sent to the backend when the submit button is clicked:

https://i.sstatic.net/hJS9W.png

Any assistance would be greatly appreciated. Just to clarify, I have not implemented any logic in the .ts file yet.

angular typescript

Answer 1

Answer №1

Below is the official example illustrating your objective: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/table/demo/row-selection.ts

import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-table-row-selection',
  template: `
    <nz-table
      #rowSelectionTable
      [nzData]="data"
      (nzCurrentPageDataChange)="currentPageDataChange($event)"
      (nzPageIndexChange)="refreshStatus()"
      (nzPageSizeChange)="refreshStatus()">
      <thead>
        <tr>
          <th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="checkAll($event)"></th>
          <th>Name</th>
          <th>Age</th>
          <th>Address</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of rowSelectionTable.data">
          <td nzShowCheckbox [(nzChecked)]="data.checked" [nzDisabled]="data.disabled" (nzCheckedChange)="refreshStatus()"></td>
          <td>{{data.name}}</td>
          <td>{{data.age}}</td>
          <td>{{data.address}}</td>
        </tr>
      </tbody>
    </nz-table>`,
  styles  : []
})
export class NzDemoTableRowSelectionComponent {
  allChecked = false;
  indeterminate = false;
  displayData = [];
  data = [
    {
      name    : 'John Brown',
      age     : 32,
      address : 'New York No. 1 Lake Park',
      checked : false,
      disabled: false
    },
    {
      name    : 'Jim Green',
      age     : 42,
      address : 'London No. 1 Lake Park',
      checked : false,
      disabled: false
    },
    {
      name    : 'Joe Black',
      age     : 32,
      address : 'Sidney No. 1 Lake Park',
      checked : false,
      disabled: false
    },
    {
      name    : 'Disabled User',
      age     : 32,
      address : 'Sidney No. 1 Lake Park',
      checked : false,
      disabled: true
    }
  ];

  currentPageDataChange($event: Array<{ name: string; age: number; address: string; checked: boolean; disabled: boolean; }>): void {
    this.displayData = $event;
    this.refreshStatus();
  }

  refreshStatus(): void {
    const allChecked = this.displayData.filter(value => !value.disabled).every(value => value.checked === true);
    const allUnChecked = this.displayData.filter(value => !value.disabled).every(value => !value.checked);
    this.allChecked = allChecked;
    this.indeterminate = (!allChecked) && (!allUnChecked);
  }

  checkAll(value: boolean): void {
    this.displayData.forEach(data => {
      if (!data.disabled) {
        data.checked = value;
      }
    });
    this.refreshStatus();
  }
}

Answer 2

Below is the official example illustrating your objective: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/table/demo/row-selection.ts

import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-table-row-selection',
  template: `
    <nz-table
      #rowSelectionTable
      [nzData]="data"
      (nzCurrentPageDataChange)="currentPageDataChange($event)"
      (nzPageIndexChange)="refreshStatus()"
      (nzPageSizeChange)="refreshStatus()">
      <thead>
        <tr>
          <th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="checkAll($event)"></th>
          <th>Name</th>
          <th>Age</th>
          <th>Address</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of rowSelectionTable.data">
          <td nzShowCheckbox [(nzChecked)]="data.checked" [nzDisabled]="data.disabled" (nzCheckedChange)="refreshStatus()"></td>
          <td>{{data.name}}</td>
          <td>{{data.age}}</td>
          <td>{{data.address}}</td>
        </tr>
      </tbody>
    </nz-table>`,
  styles  : []
})
export class NzDemoTableRowSelectionComponent {
  allChecked = false;
  indeterminate = false;
  displayData = [];
  data = [
    {
      name    : 'John Brown',
      age     : 32,
      address : 'New York No. 1 Lake Park',
      checked : false,
      disabled: false
    },
    {
      name    : 'Jim Green',
      age     : 42,
      address : 'London No. 1 Lake Park',
      checked : false,
      disabled: false
    },
    {
      name    : 'Joe Black',
      age     : 32,
      address : 'Sidney No. 1 Lake Park',
      checked : false,
      disabled: false
    },
    {
      name    : 'Disabled User',
      age     : 32,
      address : 'Sidney No. 1 Lake Park',
      checked : false,
      disabled: true
    }
  ];

  currentPageDataChange($event: Array<{ name: string; age: number; address: string; checked: boolean; disabled: boolean; }>): void {
    this.displayData = $event;
    this.refreshStatus();
  }

  refreshStatus(): void {
    const allChecked = this.displayData.filter(value => !value.disabled).every(value => value.checked === true);
    const allUnChecked = this.displayData.filter(value => !value.disabled).every(value => !value.checked);
    this.allChecked = allChecked;
    this.indeterminate = (!allChecked) && (!allUnChecked);
  }

  checkAll(value: boolean): void {
    this.displayData.forEach(data => {
      if (!data.disabled) {
        data.checked = value;
      }
    });
    this.refreshStatus();
  }
}

Retrieving the row value of a checkbox in an Angular table

Answer №1

Similar questions

Problems encountered while starting npm in Angular 13

Bringing in Angular Material on Stackblitz

Creating a PDF export of your grid using Kendo Grid is a straightforward

Showing nested routes component information - Angular

Contact the help desk and receive information that is currently unknown

Streamline the process of sorting through 2 arrays

Interactive Tab content display

'Android users experiencing issue with custom marker icons failing to display'

Error message: "Encountered a template parsing error stating that the element 'ngb-carousel' is not recognized."

Angular 2 release candidate 3 encounters issues with unfulfilled dependencies

Typescript-enabled NodeJS REST client

Launching Nest.js application from Visual Studio Code

Just updated angular to version 15 and installed rxjs, but now the packages are reporting errors about missing rxjs dependencies

Struggling to connect the array of objects from the .ts file with the template (.html) in Angular

Is it possible to prevent the Virtual Keyboard from automatically appearing on mobile devices?

Exploring the @HostBinding argument in Angular directives

Is it possible to customize webpack 4 modules in order to enable Jasmine to spy on their properties?

An issue occurred when retrieving the input value during a (change) event within a nested *ngFor loop in Angular

The Electron/React/Typescript module is missing: Error: Unable to locate 'fs' in the /node_modules/electron directory

Enhance user experience with Angular Material and TypeScript by implementing an auto-complete feature that allows