title: How to use mat-list-option in mat-selection-list indirectly in angular material?
body: <p>I have grouped list of authority, to improving ux using mat-expansion-panel for each group to make groups collapsible. But when checked some options mat-selection-list doesn't change.
  This is html file:</p>
  
  <pre><code>&lt;mat-selection-list *ngIf="!formProperty.root.schema.readOnly" #list [(ngModel)]="selectedAuthority"
                                          (selectionChange)="selectionChange($event)"&gt;
      &lt;div *ngFor="let key of objectKey(groupedAuthorities())"&gt;
          &lt;mat-expansion-panel&gt;
              &lt;mat-expansion-panel-header&gt;
                  &lt;mat-panel-title matSubheader&gt;
                      &lt;h3 translate&gt;app.{{key}}.home.title&lt;/h3&gt;
                  &lt;/mat-panel-title&gt;
              &lt;/mat-expansion-panel-header&gt;
              &lt;mat-list-option [value]="authority" *ngFor="let authority of groupedAuthorities()[key] ; let i = index;"&gt;
                  &lt;p AuthorityTranslate&gt;
              {{authority.name}}
                  &lt;/p&gt;
              &lt;/mat-list-option&gt;
          &lt;/mat-expansion-panel&gt;
      &lt;/div&gt;
  &lt;/mat-selection-list&gt;
  </code></pre>
  
  <p>When i clicking on a checkbox selectionChange($event) is calling, but selectedAuthority is an empty list. While if mat-list-option sit immediately after mat-selection-list selectedAuthority contains checked options.
  This is selectionChange function in .ts file</p>
  
  <pre><code>public selectionChange(authorities: IAuthority[]): void {
  
      this.formProperty.setValue(authorities, false);
  }
  </code></pre>