How to bind mat-autocomplete on change of other mat-autocomplete?

Question

According to the official document https://material.angular.io/components/autocomplete/examples

I have gone through the example and Integrated Autocomplete in my code. But I have more requirements as it's a simple integration. Like I have to do country, state, city autocomplete which will work onchange of country autocomplete state will bind and onchange of state city will bind.

One more thing if my page has many autocomplete, then I have to write that filter function for each autocomplete? I mean I just wanted to write a basic generic code for all autocomplete.

Please suggest me. Thank you

Answer 1

You can use Subject subscriptions. You need to create Subject of country.

country$ = new Subject<Country>();

Then you need to subscribe to country$ change and after you choose country from the first autocomplete you proceed $country.next(chosenCountry) . After this you could match country (or filter) the array of states.

Be free to ask