Combine * ngIf property in Angular into an Input

Question

I have a project in Angular 11 and Angular material in which I am trying to combine the *ngIf property with the readOnly property to avoid putting two Inputs.

This is my component.html:

<ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
        <mat-cell *matCellDef="let clients; let i = index">
          <mat-form-field *ngIf="editIndex!=i" floatLabel="never" [appearance]="'none'">
              <input matInput placeholder="{{clients.name}}" [(ngModel)]="clients.name" [readonly]="true">
          </mat-form-field>
          <mat-form-field *ngIf="editIndex==i" floatLabel="never" [appearance]="'legacy'">
              <input matInput placeholder="{{clients.name}}" [(ngModel)]="clients.name">
          </mat-form-field>
        </mat-cell>
      </ng-container>

Right now I have two mat-form-field each with an Imput, one [readonly]="true" depending on the *ngIf = "editIndex! = I" property. How could I combine both to put only one mat-form-field with one Input?

This is what I want to try but I don't know how to do it or if it can be done:

<ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
    <mat-cell *matCellDef="let clients; let i = index">
      <mat-form-field floatLabel="never" [appearance]="'none'">
          <input matInput placeholder="{{clients.name}}" [(ngModel)]="clients.name" *ngIf="editIndex!=i; [readonly]="true"">
      </mat-form-field>
    </mat-cell>
</ng-container>

Answer 1

You can set conditional readonly and appearance also.

 <mat-form-field floatLabel="never" [appearance]="editIndex != i ? 'none' : 'legacy'">
     <input matInput placeholder="{{clients.name}}" 
     [(ngModel)]="clients.name" [readonly]="editIndex!=i"">
 </mat-form-field>