Angular Key-Value how to insert new Key-Value using html - html

Question

this is the class i use
export class Product
{
id: string;
title: string;
description:string;
numbersOfBuyers2Price: {[key: number]: number};
category: string;
img: string;
endDate: number;
}
the function that save the new product
onSaveProduct()
{
if (this.form.invalid) {
return;
}
if (this.mode === 'create')
{
this.productService.addProduct(
this.form.value.title,
this.form.value.description,
this.form.value.priceArray,
this.form.value.category,
this.form.value.img,
this.form.value.endDate
);
}
}
the html for create to new product
<form [formGroup]="form" (submit)="onSaveProduct()">
<table class="example-full-width" cellspacing="0"><tr>
<td>
<mat-label>Title:</mat-label>
<input formControlName="title" matInput>
</td>
<td>
<mat-label>Category:</mat-label>
<input matInput formControlName ="category">
</td>
<td>
<mat-label>IMG:</mat-label>
<input matInput formControlName ="img">
</td>
<td>
<mat-label>End Date:</mat-label>
<input matInput formControlName ="endDate">
</td>
</tr></table>
<button mat-raised-button color="accent" type="submit">Save product</button>
</form>
i'm trying to adding multiple keyValues to numbersOfBuyers2Price using the html component,
i found only how to display them with *ngFor

Answer 1

You could add UI to the HTML template to add new key value pairs to a member of your component clas. Then when the form is submitted you can use that in your onSaveProduct function.
HTML
<td>
<mat-label>New Buyers2Price:</mat-label>
<input matInput [formControl]="newKey">
<input matInput [formControl]="newValue">
<button (click)="addKeyValue()">Add</button>
</td>
TS
class YourComponent {
private buyer2price: {[key: number]: nuber} = {};
public newKey = new FormControl('');
public newValue = new FormControl('');
public function addKeyValue() {
this.buyer2price[this.newKey.value] = this.newValue.value;
}