how to make dependent another dropdown for filter in angular

Question

how to make dependent another drop down for filter in angular.i have multiple drop down they depend on each other . i am using reactive form.

   <select (change)="checkFirstDropdown()" formControlName="id" class="FormControl cond-size">
                  <option value="null" disabled >Please Select Option</option>
                  <option [ngValue]="noneDropDown" selected>
                    none
                  </option>
                  <ng-container *ngIf="checkMainIndex==0">
                  <ng-container *ngFor="let conditionsOperatorElement of allObjects.conditionsOperator">
                    <option *ngIf="conditionsOperatorElement.conditionsOperatorId==1"  [ngValue]="conditionsOperatorElement.conditionsOperatorId"
                    >{{
                      conditionsOperatorElement.title
                    }}</option>
                  </ng-container>
                </ng-container>
                <ng-container *ngIf="checkMainIndex!=0">
                  <option  [ngValue]="conditionsOperatorElement.conditionsOperatorId"
                    *ngFor="let conditionsOperatorElement of allObjects.conditionsOperator">{{
                      conditionsOperatorElement.title
                    }}</option>
                </ng-container>
                </select>

Answer 1

I think I have a solution for you. You can do that on your change function. Here is my sample code and stackblitz Demo link.

HTML:

<h1>Reactive forms SELECT-OPTIONS</h1>
<h2>Tracking simple string</h2>
<form [formGroup]="form">
    <label>Country:</label><br>
    <select formControlName="country" (change)="checkFirstDropdown($event.target.value)">
        <option *ngFor="let country of countries" [value]="country.id">
            {{ country.name }}
        </option>
    </select>
     <br>  <br>
     <label>City</label><br>
     <select formControlName="city" >
        <option *ngFor="let city of cities" [value]="city.id">
            {{ city.city }}
        </option>
    </select>
</form>

TS:

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import {Country} from './country';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  countries = [
    {
      id: 'us',
      name: 'United States'
    },
    {
      id: 'uk',
      name: 'United Kingdom'
    },
    {
      id: 'ca',
      name: 'Canada'
    }
  ];

  cities=[];
  form = new FormGroup({
    country: new FormControl(),
    city: new FormControl()
  });
  
  checkFirstDropdown($event){
     this.cities=cityList.filter(c=>c.cid===$event);
      let  itm=this.cities[0];
      this.form.controls['city'].setValue(itm.id);
     console.log($event);
  }
}

export const cityList = [
  {
    id: "1",
    cid: 'ca',
    city: "toronto",
  },
  {
    id: "2",
     cid: 'ca',
    city: "Vancouver",
  
  },
  {
    id: "3",
    cid: 'us',
    city: "New York City",
  },
  {
    id: "4",
     cid: 'us',
    city: "Los Angeles",
  
  },
  {
    id: "5",
    cid: 'uk',
    city: "London",
  },
  {
    id: "6",
    cid: 'uk',
    city: "BRIGHTON",
  }
];