Skip to content
Advertisement

How to update mat-autocomplete options from another component?

I have two components called Employee and Form in my application. There are 2 mat-autocomplete: State and City lists in EmployeeComponent. I fill and pass these mat-autocomplete controls to the FormComponent using “formData” parameter:

Employee Component:

html

JavaScript

ts

JavaScript

Form Component:

html

JavaScript

At this point, when I select a state I want the cities list is cleared and the filled by the cities of the selected state. So, where should I manage this? On EmployeeComponent or on FormComponent? And hoca should I set the cities list options with an elegant solution?

Advertisement

Answer

First of all, you use 2 mat-autocomplete. That means the same functionality and behavior. In this situation, I prefer to use a reusable component for that part.

html in parent component

JavaScript

html in parent component

JavaScript

ts in parent component

JavaScript

Code

Advertisement