Demo There is no rule all planes goes everywhere from one destination than using values is better than using keys.

You can use custom pipe for second dropdown that check values array with case sensetive then filter it

in html just give first dropdown a [(ngModel)] two way binding

for second html use pipe

 <option [value]="city.key" *ngFor="let city of opts | departure : dept">

your custom pipe

import { Pipe, PipeTransform } from "@angular/core";
@Pipe({
      name: "departure"
})
export class DeparturePipe implements PipeTransform {
   transform(value: any[], dept:string): any {
     return value.filter(x=> !dept || x.value[0].split(",").indexOf( dept.toLowerCase())>-1 )
   }
}

if you has only a few elements, you can use [ngValue], but first you need change your “options” like

public opts = [
    { key: "Warsaw", value: ["paris","new york"] },
    { key: "Paris", value: ["warsaw","new york"] },
    { key: "New York", value: ["warsaw", "paris"] }
  ];

See that value is an array of string, not an array of an unique string as you has (I suppose is a typo error). then you can use simple

<select [(ngModel)]="departure">
      <option [ngValue]="city" *ngFor="let city of opts">
        {{city.key}}
      </option>
</select>

<select >
      <option [value]="city" *ngFor="let city of departure?.value">
        {{ city }}
      </option>
</select>

But, be carefull, “departure” get the value of the all object, e.g. has the value { key: "Warsaw", value: ["paris","new york"] }

Bind first Dropdown To a property Departure

<h4>Airport of Departure</h4>
    <select name="" id="" [(ngModel)] = "departure">
      <option [value]="city.key" *ngFor="let city of opts">
        {{city.key}}
      </option>
    </select>

In Typescript

public departure: string;

For Second Dropdown :-

<h4>Destination (must be different than departure location)</h4>
    <select name="" id="">
      <ng-container *ngFor="let city of opts">
      <option [value]="city.key" *ngIf="city.key !== departure" >
        {{ city.key }}
      </option>
      </ng-container>
    </select>

I’m working on a reservation site where I have two select dropdown boxes with 3 identical city names. Depending on the choices in first dropdown, I want the second to adjust in a way that it’s not possible to have equal values.

HTML:

<h4>Airport of Departure</h4>
    <select name="" id="">
      <option [value]="city" *ngFor="let city of opts">
        {{city.key}}
      </option>
    </select>

    <!-- chosen destination -->

    <h4>Destination (must be different than departure location)</h4>
    <select name="" id="">
      <option [value]="city" *ngFor="let city of opts">
        {{ city.key }}
      </option>
    </select>

COMPONENT.TS:

public cities = ["Warsaw", "Paris", "New York"];
  public opts = [
    { key: "Warsaw", value: ["paris,new york"] },
    { key: "Paris", value: ["warsaw,new york"] },
    { key: "New York", value: ["warsaw, paris,"] }
  ];

STACKBLITZ: https://stackblitz.com/edit/flight-date-pikcer

I am having trouble figuring out the way to make this work. Thank you for your support!