Angular 4 introduces a new directive that helps you compare select options. This directive is especially useful when your select options are dynamically populated.
Let’s explain why…
Here is a sample component that contains a dropdown with some options:
We set the default option by passing the object reference through the FormControl constructor. Problem is now that when we repopulate our options list(for example through an HTTP call), the object reference is gone and the model binding of our selected value is lost.
To solve this problem we can use the compareWith directive which will no longer compare the object references but uses a boolean expression or function instead: