Angular/material ui - programatically select mat-selection-list

Question

I have a mat-selection-list that I need to programmatically check specific items when the component loads. The items I need to check will be selected based on the [value] of the mat-list-option. I can't find any documentation on this. The html is pretty simple:

<mat-selection-list color="primary" #suretyList formControlName="AgentAgencyAndSureties">
    <mat-list-option *ngFor="let surety of suretyNames" [value]="surety.Id">
        {{surety.SuretyName}}
    </mat-list-option>
</mat-selection-list>

I just want to check items with a specific surety.Id in the value. It doesn't seem like this should be too hard to do but like I said, I can't find any examples or good documentation on this.

I am using Angular 10 for both the core and material UI

Answer 1

try mat-list-option selected input.

<mat-list-option  [selected]="condition">....

Answer 2

tmsbrndz pointed me in the right direction. I created the following function:

  isChecked(id): boolean {
        const exists = this.agentModel.AgentAgencyAndSureties.some(x => x.AgencyAndSuretyId == id);
        return exists;
  }

then added the selected attribute using the function:

<mat-selection-list color="primary" #suretyList formControlName="AgentAgencyAndSureties">
    <mat-list-option *ngFor="let surety of suretyNames" [value]="surety.Id" [selected]="isChecked(surety.Id)">
    {{surety.Id + " " + surety.SuretyName}}
    </mat-list-option>
</mat-selection-list>

Answer 3

You should use [selected] attribute, because there's no information about form control support in this component (https://material.angular.io/components/list/api#MatSelectionList)