Угловой материал мат-ячейка Click event

Question

У меня есть таблица, как

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

Но я хочу что-то вроде. Если щелкнуть ячейку, ячейка станет полем ввода только для этой строки.

<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>

Как я могу это сделать?

Примечание. Я хочу избежать записи логики в файле *.ts.

Answer 1

PrimeNG предлагает несколько замечательных компонентов, таких как редактируемая таблица, в которой, если вы щелкнете по ячейке, она станет полем ввода.

Ссылка: https://www.primefaces.org/primeng/#/table/edit