I'm a newcomer to Angular and I could use some assistance with the following requirement:
In my Angular template, I have two dropdowns. I want the selection in one dropdown to automatically reflect in the other dropdown. Both dropdowns pull their values from APIs and utilize two-way binding.
For example, if the first dropdown contains student names and I select a different option, I want the second dropdown (which lists classes like 1st Grade, 2nd Grade, etc.) to automatically select the corresponding class for that student. So, if I choose the student 'John' who is studying in 2nd grade, the second dropdown should show '2nd Grade' as selected.
My Attempt so far:
I've used the (change) event in the first select option to retrieve the necessary value for the second dropdown. However, I'm unsure how to assign this value to the second dropdown.
1st Dropdown:
<select
class="form-control form-control-lg form-control-solid"
name="studentId"
[(ngModel)]="model.studentId"
required
#studentId="ngModel"
(change)="getClassByStudent(studentId.value)"
>
<option
*ngFor="let student of studentList"
value="{{ student .id }}"
>
{{ student.studentName}}
</option>
</select>
2nd Dropdown:
<select
class="form-control form-control-lg form-control-solid"
name="classId"
[(ngModel)]="model.classId"
required
#classId="ngModel"
>
<option
*ngFor="let class of classList"
value="{{ class.id }}"
>
{{ class.className }}
</option>
</select>
TypeScript:
getClassByStudent(studentId) {
debugger;
this.commonService.API_URL =
`${environment.apiUrl}/admin/studentClass/${studentId}`;
this.commonService.getList().subscribe(
response => {
this.classAsPerStudent = response?.data;
this.classId= this.classAsPerStudent.studentId
});
}