How to set two way binding data in dropdown in angular 6?

Question

I have a data like this.

[
   {
       "user_id": 1,
       "name": "John"   
   },
   {
       "user_id": 2,
       "name": "Doe"   
   },
   ...
]

In app, I have set two dropdown for show only user_id and name respectively.

For user id I have used simple select and option.

For name I have used ngx-select-dropdown.

Now I have to make two way binding, when I select Doe then id dropdown 2 will automatically bind. Same way if I choose id 1 then John will autimatically select.

I have a design like below.

Answer 1

I have solved my issue with the help of reactive form group. It provides me value easily and I have set it's form value with the help of patchValue() feature. And it works fine for me.