Angular mat-table expandable rows: how can i automatically expand first row? and how to control when i collapsed it?

Question

looking at the example on stackblitz: https://stackblitz.com/angular/ygdrrokyvkv?file=app%2Ftable-expandable-rows-example.html

1: How can i expand automatically first row onload?

2: If for example i want to do something like counting how many time i close a row, how can i do that?

in my code i have a button to open and close it:

<td style="text-align: center;" mat-cell *matCellDef="let element">
    <mat-icon (click)="expandedElement = expandedElement === element ? null : element">
                    {{expandedElement === element ? 'expand_less' : 'expand_more'}}
    </mat-icon>
</td>

tnx a lot

Answer 1

To have first item expanded:

expandedElement: PeriodicElement = ELEMENT_DATA[0];

To count the number how many times expanded, there is already a click listener:

(click)="expandedElement = element"

You can use it to count. Simple example:

(click)="toggleExpand(element)"


closedCountState = {};

toggleExpand(element) {
  if (this.closedCountState[this.expandedElement.name]) {
    this.closedCountState[this.expandedElement.name]++
  } else {
    this.closedCountState[this.expandedElement.name] = 1;
  }

  this.expandedElement = element;
}