toggle inplace editing angular2+

list.html

<mat-list *ngIf="contracts">
  <mat-list-item *ngFor="let contract of contracts">
    <div class="row">
      <span *ngIf="!contract.toggle">
        {{ contractFunnel.name }}
      </span>
      <input matInput type="text" class="input" *ngIf="contract.toggle" [(ngModel)]="contract.name">
      <ng-template [ngIf]="!contract.toggle" [ngIfElse]="editContract">
        <mat-icon *ngIf="!contract.toggle" (click)="contract.toggle = true">
          edit
        </mat-icon>
      </ng-template>
      <ng-template #editContract>
        <mat-icon (click)="updateContract(contract)" (click)="contract.toggle = false">
          done
        </mat-icon>
      </ng-template>
    </div>
  </mat-list-item>
</mat-list>

list.ts

contracts.map(element => {
  element.toggle = false;
  return element
}