How to get the selected row values in table in angular?

Question

HTML Code I am using a reactive form, well when the user selects any checkbox, and then clicks on Assemble button, i want to get the selected values. Can anyone help me?

<table mat-table [dataSource]="dataSource" fxFill appearance="outline">
 <!-- Checkbox Column -->
 <ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef>
       <mat-checkbox [(ngModel)]="value" 
         (change)="$event ? masterToggle() : null" 
         [checked]="selection.hasValue() && isAllSelected() == true"
         [indeterminate]="selection.hasValue() && !isAllSelected()">
       </mat-checkbox>
     </th>
     <td mat-cell *matCellDef="let row">
        <mat-checkbox (click)="$event.stopPropagation()" 
          (change)="$event ? selection.toggle(row) : null" 
          [checked]="selection.isSelected(row) == true">
        </mat-checkbox>
     </td>
     </ng-container>

     <!-- Name Column -->
     <ng-container matColumnDef="Name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let dataSource"> {{dataSource.name}} </td>
     </ng-container>

     <!-- Symbol Column -->
     <ng-container matColumnDef="Modified">
         <th mat-header-cell *matHeaderCellDef> Modified </th>
         <td mat-cell *matCellDef="let dataArray"> {{dataArray.modifiedAt}} </td>
     </ng-container>   
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;" 
        (click)="selection.toggle(row)">
      </tr>
</table>
</mat-sidenav-container>
   <mat-dialog-actions align="end">
     <button mat-button (click)="onCancel()">Cancel</button>
     <button mat-button type="submit" (click)="onAssemble()" 
        [disabled]="!assemblyForm.valid"> Assemble
    </button>
</mat-dialog-actions>

Rohit Sharma · Accepted Answer · 2020-06-23 07:25:10Z

Made some changes in HTML

<ng-container matColumnDef="select">
  <th mat-header-cell *matHeaderCellDef>
    <mat-checkbox  (change)="$event ? masterToggle($event) : null" [checked]="selection.hasValue() && isAllSelected() == true" [indeterminate]="selection.hasValue() && !isAllSelected()">
    </mat-checkbox>
  </th>
  <td mat-cell *matCellDef="let row">
    <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selectRow($event, row) : null" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row) == true">
    </mat-checkbox>
  </td>
</ng-container>

and added some function in .ts file

isAllSelected($event) {
  const numSelected = this.selection.selected.length;
  const numRows = this.dataSource.data.length;
  return numSelected === numRows;
}
masterToggle($event) {
  if ($event.checked) {
    this.onCompleteRow(this.dataSource);
  }
  this.isAllSelected($event) ?
    this.selection.clear() :
  this.dataSource.data.forEach(row => this.selection.select(row));
}

private selectRow($event, dataSource) {
  // console.log($event.checked);
  if ($event.checked) {
    console.log(dataSource.name);
  }
}

onCompleteRow(dataSource) {
  dataSource.data.forEach(element => {
    console.log(element.name);
  });
}

AKSH · Accepted Answer · 2020-10-07 13:03:41Z

1

If you want to display the output in HTML screen Just add the following line in your HTML code

{{selection.selected|json}}

To view in the console-

console.log(this.selection.selected)

answered Oct 7, 2020 at 13:03

AKSH

111 bronze badge

Comments

fassetar · Accepted Answer · 2018-10-11 16:59:40Z

0

Include the following code in your html

<mat-checkbox color="primary" 
    [checked]="value[i]"(change)=functionToMaintainCheckedList()>
</mat-checkbox>

In your function(TS File)

functionToMaintainCheckedList() {
    if (this.value[i]) {
        this.value[i] = false;
        // Splice the value From your array 
    } else {
        //Add that value to your array
        this.value[i] = true;
    }
}

edited Oct 11, 2018 at 16:59

fassetar

6201 gold badge10 silver badges39 bronze badges

answered Oct 11, 2018 at 13:04

sah1

4001 gold badge7 silver badges25 bronze badges

3 Comments

Siju Samson Over a year ago

Can you explain? what are you trying to do?

sah1 Over a year ago

In Your Value array you simply maintain what rows are to be added and in the array you would finally like to display on assemble you push or splice the array accordingly

Siju Samson Over a year ago

It didn't worked, as the value which you passed is undefined.

Collectives™ on Stack Overflow

How to get the selected row values in table in angular?

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related