CODEWITHSUNDEEP
angular
bigmeister
bigmeister

Reputation: 1227

How to change only specific table row in Angular 4?

I need your help

I've got such a structure like below:

    <ng-container matColumnDef="messageText">
      <mat-header-cell *matHeaderCellDef>{{ 'CUSTOMER.MESSAGES_LIST_TABLE.MESSAGE' | translate }}</mat-header-cell>
      <mat-cell *matCellDef="let row">
        <span *ngIf="row.messageText && row.messageText.length < 30">{{row.messageText.substr(0, 30)}}</span>

        <span *ngIf="row.messageText && row.messageText.length >= 30 && expanded == false">{{row.messageText.substr(0, 25)}}
          <span class="show-more" (click)="expanded = true">more</span>
        </span>
        <span *ngIf="row.messageText && row.messageText.length >= 30 && expanded == true">{{this.row.messageText}}
            <span class="show-more" (click)="this.expanded = false">less</span>
        </span>

        <span *ngIf="!row.messageText">-----</span>
      </mat-cell>
    </ng-container>

This works as a table with some text in table cells. After clicking more the text in table cell expands to show entire content. If I click less, then the text go back to its short size.

The problem is when I click on more in the cell, every cell in table expand to show full text. I'd like to expand only specific table cell (that one where I clicked the more button).

I will be grateful for your ideas and solutions. :)

Upvotes: 0

Views: 1047

Answers (2)

Chandru
Chandru

Reputation: 11184

try like this : it wil be working for me to set true or false specific row

<span *ngIf="(row.messageText && row.messageText.length >= 30 && (row.expanded == false || !row.expanded))">{{row.messageText.substr(0, 25)}}
    <span class="show-more" (click)="row.expanded = true">more</span>
</span>
<span *ngIf="row.messageText && row.messageText.length >= 30 && row.expanded == true">{{this.row.messageText}}
    <span class="show-more" (click)="row.expanded = false">less</span>
</span>

Upvotes: 1

Alex
Alex

Reputation: 274

The problem is you are using the expanded variable for all rows. You need separate variable for each row. Maybe you can add expanded property to each row object, initialize it to false and then change that.

      <mat-cell *matCellDef="let row">
        <span *ngIf="row.messageText && row.messageText.length < 30">{{row.messageText}}</span>

        <span *ngIf="row.messageText && row.messageText.length >= 30 && row.expanded == false">{{row.messageText.substr(0, 25)}}
          <span class="show-more" (click)="row.expanded = true">more</span>
        </span>
        <span *ngIf="row.messageText && row.messageText.length >= 30 && row.expanded == true">{{this.row.messageText}}
            <span class="show-more" (click)="row.expanded = false">less</span>
        </span>

        <span *ngIf="!row.messageText">-----</span>
      </mat-cell>

Upvotes: 0

Related Questions