How to make a select display options depending on the selected option of the neighboring select?

Question

JavaScript

Here is the structure:

<div class="filter">
      Filter by:
      <nb-select placeholder="Default" status="danger">
        <nb-option *ngFor="let criterion of filterConfig | keyvalue" [value]="criterion.key">{{criterion.key}}</nb-option>
      </nb-select>
      <nb-select placeholder="Default" status="danger">
        <nb-option *ngFor="let option of filterConfig | keyvalue" [value]="option.value">{{option.value}}</nb-option>
      </nb-select>
</div>

The keys filterConfigare the elements of the first select, and the values ​​are the elements of the second.

filterConfig = {
    default: [...],
    contractStatus: [...],
    contractType: [...],
    userId: [...]
}

Answer 1

<div class="filter">
      Filter by:
<div *ngFor="let criterion of filterConfig | keyvalue">
      <nb-select placeholder="Default" status="danger">
        <nb-option  [value]="criterion.key">{{criterion.key}}</nb-option>
      </nb-select>
      <nb-select placeholder="Default" status="danger">
        <nb-option [value]="criterion.value">{{criterion.value}}</nb-option>
      </nb-select>
</div>
</div>

Answer 2

<select #optSelect (change)="kindSelect.kinds = filterConfig[optSelect.value]">
  <option *ngFor="let opt of filterConfig | keyvalue">{{opt.key}}</option>
</select>

<select #kindSelect>
  <option *ngFor="let kind of (kindSelect.kinds || filterConfig.fruit)">{{kind}}</option>
</select>

public filterConfig = {
  fruit: ['apple', 'orange', 'pineapple', 'grape'],
  vegetable: ['carrot', 'potato', 'dill', 'cucumber']
}

The intermediate variable kindSelect.kindswas introduced due to the fact that if you simply take optSelect.valuethe value on the initial rendering of the template, value does not yet optSelect.valueappear on the first change detection, and in the dev mode on the second detection pass, value mismatches with the template are detected, which will cause ExpressionChangedAfterItHasBeenCheckedError.
Tip: do not get carried away with such shamanism, but make a normal reactive form and subscribe to it.