ngx-datatable: mat-icon button instead of anchor for toggle button

Question

I am using ngx-datatable

I have a column with a icon right arrow and icon down arrow to expand details for each row.
The current code works below:

<ngx-datatable ...

<ngx-datatable-column 
[width]="60" 
[resizeable]="false" 
[sortable]="false" 
[draggable]="false" 
[canAutoResize]="false">
  <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
    <a href="javascript:void(0)" style="text-decoration: none;" [class.datatable-icon-right]="!expanded" [class.datatable-icon-down]="expanded"
      title="Expand/Collapse Row" (click)="toggleExpandRow(row)">
    </a>
  </ng-template>
</ngx-datatable-column>

</ngx-datatabe>

When clicking the anchor tag the row that the anchor tag was on expands, while all others remain closed. This is the correct behavior.
Instead of anchor tags I would like to use an Angular Material icon button, with an expand and close icon.

I tried the following (replaced anchor with button):

   <button mat-icon-button (click)="toggleExpandRow(row)"><mat-icon>{{expandIcon}}</mat-icon></button>

In my .ts I do:

 toggleExpandRow(row){
    if(environment.debug){
      console.log("toggleExpandRow(row, $event) Called", row);
    }
    if(this.expandToggle){
      this.expandIcon = 'expand_more';
      this.expandToggle=false;
    }else{
      this.expandIcon = 'chevron_right';
      this.expandToggle=true;
    }

But when I click the button on one row, all rows change the icon to expanded. How can I make this so only the row I clicked has the expanded button? It seems as though I need to somehow access the actual button in the DOM that was clicked inorder to set that icon and only that icon.Any help or ideas?

Update:

I realized that I can get the row index that was clicked. I can then have an array of of matIcons:string[] and use the row id to index into that array to update each rows icon. Anyone have a better way?

 <ng-template let-rowIndex="rowIndex" let-row="row" let-expanded="expanded" ngx-datatable-cell-template>

Even better I could just use the "expanded" state... will post solution if it works.

Please provide a stackblitz if you want to have help. Just to be sure did you try something like that ? <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template> <button mat-icon-button (click)="toggleExpandRow(row)"><mat-icon>{{expandIcon}}</mat-icon></button> </ng-template> — Yvan

wwjdm wwjdm · Accepted Answer · 2019-10-14T01:06:59

I was able to do it with the "expanded" variable:

    <button *ngIf="expanded" mat-icon-button (click)="toggleExpandRow(row)"><mat-icon>expand_more</mat-icon></button>
    <button *ngIf="!expanded" mat-icon-button (click)="toggleExpandRow(row)"><mat-icon>chevron_right</mat-icon></button>

ngx-datatable: mat-icon button instead of anchor for toggle button

Update:

1 Answers