How to check the checkbox by default in the mat-table for particular rows in angular8 on modal click?

Question

I am using mat-table with selection. Here I'm facing an issue let me explain clearly,

Initially, on Add Line Item(s) click, I am opening a dialog box and forming the mat-table selection and selecting the items that are needed and after closing the dialog modal I'm appending back to another mat-table what we chose in the modal and when we click on same Add Line Item(s) the previously selected items should be checked. Can anyone let me know how it can be checked on modal open again?

Here is the video grab to check the issue https://share.vidyard.com/watch/XonduKJB8a9DsxYVWuj362

And also I tried with this.selection.select(row);

But it is not checked. Here is the code snippet for the modal ts file

this.selectedData.forEach(row => {
      console.log(row);
      this.selection.select(row);
    });

Could you please create demo in Stackblitz and provide link. — RGS, Feb 26 '20 at 07:46

score 0 · Answer 1 · answered Feb 26 '20 at 08:04

Hope this helps...

app.component.ts

displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
selection = new SelectionModel<PeriodicElement>(true, []);

selectedData: any = [];


 isAllSelected() {
   const numSelected = this.selection.selected.length;
   const numRows = this.dataSource.data.length;
   return numSelected === numRows;
 }


 checkboxLabel(row?: PeriodicElement): string {
   if (!row) {
     return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
   }   
   return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row 
   ${row.position + 1}`;
  }

app.component.html

<div class="container">
  <form class="text-center" #form="ngForm">
    <div class="row">
      <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data- 
       target="#myModal">Open Modal</button>
    </div>

   <table>
     <thead>
       <tr>
      <th>No.</th>
      <th>Name</th>
      <th>Weight</th>
      <th>Symbol</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of this.selection.selected">
      <td>{{item.position}}</td>
      <td>{{item.name}}</td>
      <td>{{item.weight}}</td>
      <td>{{item.symbol}}</td>
    </tr>
  </tbody>
</table>

  </form>
</div>

<div id="myModal" class="modal fade" role="dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

      <!-- Checkbox Column -->
        <ng-container matColumnDef="select">
          <th mat-header-cell *matHeaderCellDef>

          </th>
          <td mat-cell *matCellDef="let row">
            <mat-checkbox (click)="$event.stopPropagation()"
                          (change)="$event ? selection.toggle(row) : null"
                          [checked]="selection.isSelected(row)"
                          [aria-label]="checkboxLabel(row)">
            </mat-checkbox>
          </td>
        </ng-container>

        <!-- Position Column -->
        <ng-container matColumnDef="position">
          <th mat-header-cell *matHeaderCellDef> No. </th>
          <td mat-cell *matCellDef="let element"> {{element.position}} </td>
        </ng-container>

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

        <!-- Weight Column -->
        <ng-container matColumnDef="weight">
          <th mat-header-cell *matHeaderCellDef> Weight </th>
          <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
        </ng-container>

        <!-- Symbol Column -->
        <ng-container matColumnDef="symbol">
          <th mat-header-cell *matHeaderCellDef> Symbol </th>
          <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"
            (click)="selection.toggle(row)">
        </tr>
    </table>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

score -1 · Answer 2 · answered Feb 26 '20 at 07:56

-1

Store in an array the checkeds

Declare in .ts

checks:boolean[]=[]

in .html use

<input type="check" [(ngModel)]="checks[i]">

And take account that when you give check all the only you need is

checks.forEach(x=>{x=true})

answered Feb 26 '20 at 07:56

Eliseo

50,109
4
29
67

input type="check" is not valid – Ste Sep 09 '20 at 16:07

How to check the checkbox by default in the mat-table for particular rows in angular8 on modal click?

2 Answers2