When developing a mat-autocomplete component to allow for multiple selections, I opted to utilize a mat-selection-list. This choice was made in order to take advantage of built-in features like checkboxes.
However, despite initializing the 'chartList' array with values, the dynamic mat-selection-list does not display within the mat-autocomplete component.
<mat-form-field>
<mat-label>{{ Patient }}</mat-label>
<input type="text" placeholder="Text" matInput formControlName="links" [matAutocomplete]="auto" />
<mat-autocomplete #auto="matAutocomplete">
<mat-selection-list #selectionList (selectionChange)="onSelectionChange($event)" [disableRipple]="true">
<mat-list-option *ngFor="let chart of chartList" [value]="chart"
[checkboxPosition]="'before'" [id]="chart.key">
<div class="d-flex">
<span class="col-4 xs-text">{{ chart.name }}</span>
<span class="col-3 xs-text">{{chart.additionalData.dateOfBirth | date}}</span>
<span class="col-4 xs-text">{{chart.additionalData.city }}</span>
</div>
</mat-list-option>
</mat-selection-list>
</mat-autocomplete>
</mat-form-field>
Although the cdk-panel is visible as a slender dropdown, it appears empty without any content being displayed.