I'm trying to create a button that can hide/unhide text in a table cell if the length is greater than a certain number. However, the current implementation is not working as expected. The button ends up opening all texts in every cell, and it only works in the first cell.
<ng-container matColumnDef="Test">
<th mat-header-cell *matHeaderCellDef mat-sort-header >Test</th>
<td mat-cell *matCellDef="let row; let i = index;">
<ng-container>
{{ show ? (row.Test | slice:0:100) : row.Test}}
<button mat-raised-button class="show-less-button" color='primary' type="button" *ngIf="row.Test.length > 5;" (click)="( show == i ? show : show = i )"> {{ ((show == i)) ? 'Show less' : 'Show more' }}
</button>
</ng-container>
</td>
</ng-container>