title: How to retrieve all checked checkboxes?
body: <p>I defined some checkboxes with Angular Material Checkbox component: <a href="https://material.angular.io/components/checkbox/examples" rel="nofollow noreferrer">https://material.angular.io/components/checkbox/examples</a></p>
  
  <pre><code>&lt;div&gt;
    &lt;mat-checkbox formControlName="authors" class="authors-checkboxes" *ngFor="let author of authors" [value]=author.id&gt;{{ author.name }}&lt;/mat-checkbox&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And a FormGroup</p>
  
  <pre><code>this.form = new FormGroup({
    id: new FormControl(article.id),
    timestamp: new FormControl(article.timestamp),
    title: new FormControl(article.title),
    chapo: new FormControl(article.chapo),
    body: new FormControl(article.body),
    bodyStyle: new FormControl(article.bodyStyle),
    author: new FormControl(article.author),
    authors: new FormControl(article.authors),
    authors2: new FormControl(article.authors2),
    date: new FormControl(article.date),
    readingTime: new FormControl(article.readingTime),
    pictures: new FormControl(),
    status: new FormControl(),
    mainPicture: new FormControl(article.mainPicture),
    mainPictureFile: new FormControl(article.mainPictureFile),
    position: new FormControl(article.position)
  });
  </code></pre>
  
  <p>What's the best way to get all clicked checkboxes? I want to gather all selected authors.</p>
  
  <p>I was considering doing it with <em>document.getElementsByClassName</em> and <em>forEach</em>, but have the feeling it's not the good approach.</p>
  
  <pre><code>const authorsCheckboxes = document.getElementsByClassName("authors-checkboxes");
  console.log(authorsCheckboxes);
  Array.prototype.forEach.call(authorsCheckboxes, function(authorCheckbox) {
    console.log(authorCheckbox);
    console.log(authorCheckbox.value);
  });
  </code></pre>