After working with Angular for a few weeks, I came across a problem that has me stumped. On a page, I have a list of about 100 button inputs, each representing a different value in my database. I've linked these inputs to models as shown in this snippet:
Inputs that should be changed on click
Currently, all the inputs behave the same way - when clicked, the corresponding model value should change. However, creating individual functions for each input doesn't seem like the most efficient solution.
In scenarios where multiple properties follow the same pattern but correspond to different values in the database, how can I create a generic function to update them in Angular?
<div class="col-sm-8">
<div class="btn-group">
<input type="button" name="C0R" (click)="changeSpineBoxValue($event)" [(ngModel)]="examData.ExamCervical.C0R" >
<input type="button" name="C0C" [(ngModel)]="examData.ExamCervical.C0C">
<input type="button" name="C0L" [(ngModel)]="examData.ExamCervical.C0L">
</div>
</div>For instance, I have around 100 similar inputs, like:
<input type="button" name="C0L" [(ngModel)]="examData.ExamCervical.C0L">
I want to create a TypeScript function that triggers when any of these inputs are clicked. The function should dynamically change the ngModel value based on the input clicked. Instead of writing individual functions for each input, is there a way to achieve this generically? For example:
changeInputModelValue(inputname: string, value: number){
//logic to adjust ngmodel based on inputname and value
}