Search code examples
angularangular-materialangular-forms

Angular material select not binding correctly the object value

I have a very simple angular material select component that's filled from an array of objects. I tried the double way binding with ngModel and the component select attribute but both don't work as expected.

What I am expecting: Changing the selected option updates the ngModel value with accordingly.

What actually happens: Changing the selected option fires the select change method but don't update the binded attribute.

How to reproduce: Select the Option2 and then go back to Option1, play only with 2 options.

Where to reproduce: https://stackblitz.com/edit/angular-qpk2di

Solution

  • So your error is actually not that complicated you have wrongly used the [()] braces

    1. [] is to bind a value to a variable
    2. () is for event handling

    you used a eventhandler and "databinder" on value [(value)], but you only want to bind

    [value] = "selected option"

    the event is handled with the (selectionOnChange)="handleYourEvent()" event