Expand All/Collapse All column in Angular Material

I want to be able to make the Actions column on the data table to have the ability to expand and collapse all of the rows. Is there a way to do that. I am trying to make it a link but not sure how to do that or if that is possible. This the code for the Actions column.

<ng-container
matColumnDef="{{column}}"
*ngFor="let column of columnsToDisplay"
>
<ng-container *ngIf="column !== 'action'; else action">
<th mat-header-cell *matHeaderCellDef>{{column}}</th>
<td mat-cell *matCellDef="let element">{{element[column]}}</td>
</ng-container>
<ng-template #action>
<th mat-header-cell *matHeaderCellDef><a href="#" (click)="accordion().openAll()" underline="none">Actions</a></th>
<td mat-cell *matCellDef="let element" class="checkbox-spacing">
<mat-icon
(click)="expandedElement = expandedElement === element ? null : element"
>{{expandedElement === element ? 'expand_less' :
'expand_more'}}</mat-icon
>
</td>
</ng-template>
</ng-container>


Demo code is here

Continue reading...