Currently, I am working on inline editing in my application. I am retrieving data from an API and storing the value inside an input using ngModel. I have a custom object named editCat and editCarSub that I need to send to the API. How can I extract the value from the input and store it inside my object?
If you want to see the code in action, check out this 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>