show more/less button in table cell angular-CodePudding

i have the mat table and i make a button which hide/unhide text from table cell if length > some number
but it works incorrect, this button open all texts in every cell and button only work in 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  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>

CodePudding user response：

You'll have to isolate it per row as "show" will be for the entire component and then there's only one. Something like this:

 <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>
        {{ row.show ? (row.Test | slice:0:100) : row.Test}} 
        
        <button 
            mat-raised-button 
             
            color='primary' 
            type="button" *ngIf="row.Test.length > 5;" 
            (click)="row.show = !row.show">
            {{ ((row.show)) ? 'Show less' : 'Show more' }}
        </button>
      </ng-container>
      </td>
  </ng-container>