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;**
 }