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

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

  {{ toggle.label }}

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.