Angular material mat-cell Click event

Question

I have a table like

<ng-container matColumnDef="position">
  <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
  <mat-cell *matCellDef="let row"> 
        {{row.position}} 
  </mat-cell>

But I want something like. If you click on the cell, the cell will become an input field only for that row.

<ng-container matColumnDef="position">
  <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>

  <mat-cell *matCellDef="let row" (click)="flag = true"> 
    <ng-container
      *ngIf="flag ? clicked : notClicked">
    </ng-container>

    <ng-template #notClicked>
      <div>
        {{row.position}} 
      </div>
    </ng-template>

    <ng-template #clicked>
      <div>
        <input matInput placeholder="Favorite food" value="{{row.position}}">
      </div>
    </ng-template>

  </mat-cell>

How can I do it?

Note: I want to avoid writing a logic in the *.ts file.

Harini P Harini P · Accepted Answer · 2018-09-25T14:55:56

PrimeNG offers some great components like editable-table in which if you click on a cell, it becomes an input field.

Reference: https://www.primefaces.org/primeng/#/table/edit

Angular material mat-cell Click event

1 Answers