CODEWITHSUNDEEP
htmlangulartypescript
Malakmkd
Malakmkd

Reputation: 141

select a specific value for each row in table

I am doing the following as shown in the two pics and code. What I want is to change the admin status for the selected row only and not the others too. So when I select in-progress fr first row it should change only for the first row and the other remains same status.

          <td mat-cell *matCellDef="let element" class="table-body">
        <div class="noAdmin" [matMenuTriggerFor]="menu2"> {{ adminStatus }}</div>
        <mat-menu #menu2="matMenu">
          <button (click)="selectInProgress()" mat-menu-item>
            <div class="inProgress">in-progress</div>
          </button>
          <button mat-menu-item>
            <div class="scheduled">scheduled</div>
          </button>
          <hr />
          <button mat-menu-item>
            <div class="lost">lost</div>
          </button>
          <hr />
          <button (click)="selectNoAdmin()" mat-menu-item>
            <div class="noAdmin">No admin</div>
          </button>
        </mat-menu>
      </td>

And in angular ts:

  public adminStatus: string = "No admin";
  selectInProgress() {
this.adminStatus = "in-progress"
  }

  selectNoAdmin() {
    this.adminStatus = "No admin"
  }

First Image

Second Image

Upvotes: 0

Views: 42

Answers (1)

Matthieu
Matthieu

Reputation: 151

If y have a good understandig of your situation. You should pass the index of the row in your function.

*matCellDef="let element; let i = index;"

In your function, you can change the value of your element based on the index.

Upvotes: 1

Related Questions