Angular mat-button-toggle rendering does not bind to ngModel

Question

I have been trying to fix a bug where the mat-button-toggle element renders as "selected", even though the ngModel has a false value. And I found something, that at least to me looks strange. Consider a code example:

.html

<mat-button-toggle 
    [(ngModel)]="myVar" 
    (change)="toggle()"
    ngDefaultControl
    name="myVar">
  TOGGLE ME
</mat-button-toggle>

.ts

myVar = false
toggle() {
    // do nothing!
}

I expected:

After you click on the button, it does NOT render as "selected" because myVar still has false value.

What actually happens:

The button renders as "selected" disregarding the actual myVar value.

I have a feeling I miss some core Angular understanding here that makes me unable to understand why doesn't it work like I expect it to. Can you help me understand what is wrong here?

don't you get ```Error: No value accessor for form control with unspecified name attribute``` ? — Fateme Fazli, Mar 03 '19 at 10:14
I decided to remove `ngDefaultControl` from the question to simplify it, but I'll add it back. The problem still persists though. — Arsen Simonean, Mar 03 '19 at 10:18
Do you mean double quotes? If yes, just tried and didn't help. I'll update the question with double quotes for consistency though, thanks. — Arsen Simonean, Mar 03 '19 at 10:26

score 3 · Accepted Answer · answered Mar 03 '19 at 10:33

MatButtonToggle does not support angular's two way binding. For Angular two binding to work the component needs to implement ControlValueAccessor which MatButtonToggle does not. Instead you can can listen for the event and manually bind it.

<mat-button-toggle 
  [checked]="myFlagForButtonToggle" 
  (change)="myFlagForButtonToggle = $event.source.checked">
    Toggle me!
</mat-button-toggle>

Angular mat-button-toggle rendering does not bind to ngModel

1 Answers1