How to control multiple checkboxes in Angular

my.component.html

<label *ngFor="let control of form.controls.liquors.controls; let i = index">
  <input type="checkbox" [formControl]="control"></input>
  <span>{{ liquors[i].label }}</span>
</label>

my.component.ts

import { Component, OnInit } from "@angular/core";
import { FormArray, FormBuilder, FormControl, FormGroup } from "@angular/forms";

const Liquors: { id: number; label: string; }[] = [
  { id: 1, label: "Beer" },
  { id: 2, label: "Whisky" },
  { id: 3, label: "Wine" },
]

@Component({
  templateUrl: "./my.component.html",
})
export class MyComponent implements OnInit {
  readonly liquors = Liquors;
  form: FormGroup<{ liquors: FormArray<FormControl<boolean>> }>;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.fb.nonNullable.group({
      liquors: this.fb.array(
        this.liquors.map(() =>
          this.fb.nonNullable.control(false),
        ),
      ),
    });
  }
}