Angular Mat Table - Editing Individual column cells

Question

I'm following this stackblitz demo to make editable columns in Materials Table - https://stackblitz.com/edit/angular-g5u7cy

Above example makes all the fields as editable , so I've been tryin to make individual column cell as editable.

template :
<ng-container matColumnDef="location">
        <th mat-header-cell *matHeaderCellDef> Location </th>
        <td mat-cell *matCellDef="let element;let index = index">
          <mat-form-field floatLabel="never" 
          [ngClass]="editMode ? 'no-underline': ''">
         <input matInput [value]="element.workLocation" [(ngModel)]="element.workLocation" (click)="toggleEdit(index)" [readonly]="editMode && index == editableColumn">
         </mat-form-field>
         </td>
</ng-container>

ts toggle function: 
toggleEdit(index){
  this.editMode=false;
  this.editableColumn=index;
}

But unable to set the readonly attribute for the particular cell on which edit is to be enabled, not sure if [readonly]="editMode && index == editableColumn" works for multiple conditions.

Answer 1

I was able to dynamically add [readonly] property through ternary operator instead

[readonly]="index == editableColumn ? 'false' : 'true'"

where editableColumn you pass on the index through (click) event