I have a mat-table with 3 icons in each row. One of the icons is an arrow that opens up an expandable row when pressed. I want to invert the icon when it's pressed but only the specific one being pressed, not all arrows in all rows.

icons in rows before expandable row is opened: https://i.stack.imgur.com/vUPpO.png

icons in rows after expandable row is opened: https://i.stack.imgur.com/ZCeE1.png

I'm using ngClass on a boolean to invert the arrow

HTML:

<div  (click)="expand(element)" [ngClass]="isopened ? 'inverted':</div>

CSS:

.inverted {
transform: scaleY(-1);
}

Ts:

  expand(element: any) {
    ...

    this.isopened = !this.isopened;
  }

How can I only toggle the specific clicked icon?

CodePudding user response：

Based on your comments, go with something like this: https://stackblitz.com/edit/angular-vg4wcx?file=app/table-basic-example.html

1. Add another property to the element's object (I've added 'isopened') as boolean (set to false initially).
2. Change the ngClass to check element.isopened instead of just isopened, because you want to check only that specific element's status.
3. Finally, in your method handling expanding of the icon, use element instead of this, since you're checking/setting the proprty of the value you've passed to the method, and the value is element itself.

Didn't use your div component details, because I'm not sure how you fit it into the table structure, but this should give you a right idea how to go about it.