'getting value from ngModel and storing it in object

i am doing inline editing in my app, i am getting data from API and storing value inside input with ngModel, i have custom object (editCat and editCarSub) which i want to send to API, i want to get value from input and store it inside my object, how can i achieve that?

here is my stackblitz

.ts

  done(id, index) {
    this.editCat = {
      carPartCategoryId: id,
      name: '', //input value here
    };
    this.hidemeSub[index] = false;
    console.log(this.editCat);
  }

.html

<div *ngFor="let item of items; let index = index">
  <div class="d-flex align-items-center">
    <span [hidden]="hidemeSub[index]">{{ item.name }}</span>
    <div
      class="btn"
      (click)="hidemeSub[index] = !hidemeSub[index]"
      [hidden]="hidemeSub[index]">
      Edit
    </div>
  </div>
  <div class="d-flex pl-3">
    <input type="text" [hidden]="!hidemeSub[index]" [(ngModel)]="item.name" />
    <div
      class="btn"
      [hidden]="!hidemeSub[index]"
      (click)="done(item.carPartCategoryId, index)">
      Done
    </div>
  </div>
</div>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source