title: Binding an Angular Material Selection List
body: <p>I am creating a Toolbar with a selection list (checkboxes with each list item) using Angular Material 2. I just cannot figure out how to set the checkboxes before the list is displayed and then get the selected items following user interaction.</p>
  
  <p>I am trying the control within a Form thinking I may need this to bind to ngModel, but this doesn't seem to help. My html so far is:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;form
    novalidate
    #areaSelectForm="ngForm"&gt;
  
  &lt;div&gt;
      &lt;mat-selection-list 
                          #areasList="ngModel"
                          [(ngModel)]="model"
                          id="areaListControl"
                          name="areaListControl"
                          (ngModelChange)="onAreaListControlChanged($event)"&gt;
          &lt;mat-list-option *ngFor="let tta of taskTypeAreas" (click)="onCheckboxClick($event)" [value]="tta"&gt;
              {{tta}}
          &lt;/mat-list-option&gt;
      &lt;/mat-selection-list&gt;
  &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>This must be a well trodden path but the documentation is difficult to interpret and I cannot seem to find any suitable examples.</p>
  
  <p>Any guidance very welcome please.</p>