Change value of dropdown from another dropdown in Angular 17

I'm trying to setup the form in such a way that when someone selects Mr in the first dropdown, the value changes to male in the second dropdown. Likewise, if someone chooses Miss/Mrs, the 2nd dropdown changes to female.

How can I achieve this?

Here is the HTML

<div class="master">
  <select [(ngModel)]="registration.salutation">
    <option value="Mr">Mr &nbsp;</option>
    <option value="Miss">Miss</option>
    <option value="Mrs">Mrs</option>
    <option value="Dr">Dr</option>
    <option value="Prof">Prof</option>
  </select>
</div>

<div class="slave">
  <select [(ngModel)]="registration.gender">
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="others">Others</option>
  </select>
</div>

This is the .TS:

ngOnInit(): void {
  //this.registration.salutation = 'Mr';
  if(this.registration.salutation = 'Mr') {
    this.registration.gender = 'male';
  }
  if(this.registration.salutation = 'Mrs' || 'Miss') {
    this.registration.gender = 'female';
  }
}

Currently, nothing happens when I choose any value in the first dropdown.

You can use the ngModelChange event to apply your logic:

<div class="master">
  <select [(ngModel)]="registration.salutation" (ngModelChange)="salutationChange()">
    <option value="Mr">Mr &nbsp;</option>
    <option value="Miss">Miss</option>
    <option value="Mrs">Mrs</option>
    <option value="Dr">Dr</option>
    <option value="Prof">Prof</option>
  </select>
</div>

salutationChange() {
  if (this.registration.salutation === 'Mr') {
    this.registration.gender = 'male';
  } else if (this.registration.salutation === 'Mrs' || 'Miss') {
    this.registration.gender = 'female';
  }
}