How to bind to model with Angular Material ?

Question

Take a look at this Plunker: https://plnkr.co/edit/yu95hUrKlUh4Ttc5SwYD?p=preview

When I\'m using , I am able to modify the valu

Answer 1

MatButtonToggle component doesn't implement ControlValueAccessor therefore you can't use ngModel on it. ngDefaultControl was introduced for other purposes.

MatButtonToggle is supposed to be a part of mat-button-toggle-group. But if you want to use it as a standalone component and bind model to it here is some example of how you can do it:

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

Plunker Example

Answer 2

If you are trying to use mat-button-toggle to switch between enabling / disabling something, you will have to use a binding on mat-button-toggle-group, and make sure that the mat-button-toggle's themselves have the boolean values of true and false, not the string values. That is to say:

<mat-button-toggle-group [(ngModel)]="isEnabled">
    <mat-button-toggle [value]="true"> Enable </mat-button-toggle>
    <mat-button-toggle [value]="false"> Disable </mat-button-toggle>
</mat-button-toggle-group>

Answer 3

<mat-button-toggle-group formControlName="flags" style="width: 100%" (change)="onChangeFlag($event)">
    <mat-button-toggle *ngFor="let flag of allFlags" value="{{flag.flag}}" style="width: 100%;" 
    matTooltip="{{flag.name}}" [checked]="flagSelected == flag.flag"
    > <img [alt]="flag" src="assets/images/flags/{{flag.flag}}.png" width="20px"/> 
    </mat-button-toggle>

  </mat-button-toggle-group>

Answer 4

With Angular 6.1.3 and Angular Material 6.4.6 using Slide Toggle (i.e., <mat-slide-toggle>)

Template

<mat-slide-toggle [checked]="isAwesome"
   (change)="toggleIsAwesome()">
   Is TypeScript Awesome?
</mat-slide-toggle>

Component

export class AwesomeExampleComponent {
   // props
   isAwesome = false;

   // methods
   toggleIsAwesome() {
      this.isAwesome = !this.isAwesome;
      // could put additional logic here
   }
}

I'm using this solution, and it conveniently aligns with the Style Guide rule:

Do put presentation logic in the component class, and not in the template.

Answer 5

mat-button-toggle dont have a boolean value and [(ngModel)] won't work. See doc.

These toggles can be configured to behave as either radio-buttons or checkboxes.

a use case may be like this

<mat-button-toggle-group  [(ngModel)]="myFlagForButtonToggle">
  <mat-button-toggle value="button1"  ngDefaultControl>Toggle me!</mat-button-toggle>
  <mat-button-toggle value="button2"  ngDefaultControl>Toggle me!</mat-button-toggle>
  <mat-button-toggle value="button3"  ngDefaultControl>Toggle me!</mat-button-toggle>
</mat-button-toggle-group>

and change your boolean to myFlagForButtonToggle :string;

Answer 6

I have created a Custom Form Control for the Angular Material Button Toggle Group. Here is how I implemented it:

custom-button-toggle-group.component.html

<mat-button-toggle-group
  (change)="onToggleGroupChange($event)"
  [disabled]=disabled
  [value]=value
>
  <mat-button-toggle
    *ngFor="let toggle of toggles"
    [value]="toggle.value"
  >{{ toggle.label }}</mat-button-toggle>
</mat-button-toggle-group>

custom-button-toggle-group.component.ts

import { Component, forwardRef, HostListener, Input } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import { MatButtonToggleChange } from '@angular/material/button-toggle';

export interface ButtonToggle {
  value: string;
  label: string;
}

@Component({
  selector: 'custom-button-toggle-group',
  templateUrl: './button-toggle-group.component.html',
  styleUrls: ['./button-toggle-group.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR, multi: true,
      useExisting: forwardRef(() => CustomButtonToggleGroupComponent),
    }
  ]
})
export class CustomButtonToggleGroupComponent implements ControlValueAccessor {

  @Input() public toggles: ButtonToggle[];

  public value: string;
  public disabled: boolean;

  private onChange: (value: string) => void;
  private onTouched: () => void;


  public onToggleGroupChange({ value }: MatButtonToggleChange): void {
    this.doChange(value);
  }

  writeValue(obj: any): void {
    this.value = obj;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState?(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  private doChange(selectedValue: string): void {
    this.onChange(selectedValue);
  }

  @HostListener('blur')
  private doBlur(): void {
    this.onTouched();
  }

}

This way you will be able to use FormControl, FormControlName, etc. on the custom-button-toggle-group.