How do I use checkbox groups in Angular Material?

How do I use checkbox groups in Angular Material?

To use checkbox groups in Angular Material, you can utilize the MatCheckbox component within a FormGroup. You can create a group of checkboxes by binding them to a form control.

Can you show me a code example?

Sure! Here's a simple example:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-checkbox-group',
  template: `
    <form [formGroup]="form">
      <mat-checkbox formControlName="option1">Option 1</mat-checkbox>
      <mat-checkbox formControlName="option2">Option 2</mat-checkbox>
      <mat-checkbox formControlName="option3">Option 3</mat-checkbox>
    </form>
  `
})
export class CheckboxGroupComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      option1: false,
      option2: false,
      option3: false
    });
  }
}

What if I want to get the selected values?

You can access the selected values by using the value property of the form group. For example:

const selectedValues = this.form.value;
console.log(selectedValues); // { option1: true, option2: false, option3: true }