Changing the index in one dropdown needs to set the selected option in another dropdown in angular and typescript

Question

I am new to angular and I need some help for the below requirement:

I have two dropdowns in my angular template and what I want is that when I change the index in one dropdown, the particular option (value) should get selected in the other dropdown. Both the dropdowns are getting their values from APIs and are using two way binding.

e.g., if the 1st dropdown contains the student names and I select another option in this dropdown then the 2nd dropdown (which contains the classes like 1st Grade, 2nd Grade etc.) should get auto selected for this student i.e., if I selected the student say 'John' and if he is studying in the 2nd grade then the dropdown 2 should set the selected option to the 2nd Grade.

What I tried so for:

I used the (change) event in the 1st select option and I am getting the value that I need in the 2nd dropdown but I am not sure how can I assign this to the 2nd 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
     });
 }

Answer 1

There's a lot of information missing from the question. I've still tried to replicate the scenario and have fixed the issue.

So assuming that getList method on your CommonService returns data that looks something like this:

{
  "data": {
    "studentId": 5
  }
}

You'll need to set it to this.model.classId instead of this.classId in your subscribe block.

getClassByStudent(studentId) {
  // ...
  this.commonService.getList().subscribe((response: any) => {
    this.classAsPerStudent = response.data;
    this.model.classId = this.classAsPerStudent.studentId; // <----- HERE
  });
}

The second thing is that all the options in your second select list have a value of coaches.id when it should be class.id instead:

<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>

Here's a Working Sample Code on StackBlitz for your ref.

NOTE: Select any student from the first list and notice that the option in the second select list changes to Class 5. It will only change to Class 5 all the time coz in my mock, I've hard coded the studentId to 5.