Bind Data to Multi Select Dropdown - Angular

I have been trying to bind data to the multi select dropdown on an edit form. I pass the list of options through as a string and display, however I want to whatever options the user has saved to show selected on dropdown in the edit form.



Code for dropdown:

<select class="form-select" formControlName="sites" [multiple]="true" #sites aria-label="Default select example">
<option *ngFor="let data of plantList" value={{data.sites}}>{{data.sites}}</option>
</select>


What have i done:

I have tried to download to ng-select and different libraries for the select-dropdown but these do not work.

On selecting the edit button I have added the following code to populate the other controls:

addEdiUserDetails(d: any) {
this.editUserForm.get('username')?.setValue(d.username)
this.editUserForm.get('email')?.setValue(d.email)
this.editUserForm.get('sites')?.setValue(d.sites)
}


however this sets the value for the dropdown in the back end but doesn't show selected on dropdown on frontend.

UPDATE:



Added this code and sets it in background but doesn't show them highlighted on frontend??

addEdiUserDetails(d: any) {
this.editUserForm.get('username')?.setValue(d.username)
this.editUserForm.get('email')?.setValue(d.email)
**this.selectedSites = d.sites;**
}

Continue reading...