Angular multi select dropdown

Question

I would like to design a multi select drop down functionality in angular using bootstrap 4. Following is the image below.

Following is my implementation as of now.

             <div class="form-group">
                      <label>Employee privilege</label>
                      <select id="employeePrivelege" data-style="btn-default" 
                      class="selectpicker form-control" 
                      formControlName="employeePriveleges"
                      multiple data-max-options="2">      
                        <option selected>Mustard</option>
                        <option selected>Barbecue</option>
                          </select>
                    </div> 

I have 2 problems

1. An element is not selected if I add the selected attribute on option

I know this is happening because of the fact that I do not use jQuery and I do not want to add JQuery as this is not recommended in Angular.

Questions I have is

1. What is the simplest option of implementing a multiple dropdown UI component in Angular with or without bootstrap 4

Answer 1

I tried your code but the selected attribute works fine for me.

I created a snippet at w3schools that shows that it works: link to snippet

It looks like it's not selected because the selected options are greyed out because the control is inactive. If you add another option however that is not selected, you can see the difference. I created another snippet here.

My simplified code looks like that:

<select name="Sauces" multiple>
  <option value="Mustard">Mustard</option>
  <option selected value="Barbecue">Barbecue</option>
  <option value="Ketchup">Ketchup</option>
  <option selected value="Mayonaise">Mayonaise</option>
</select>

Also I found an Angular component which works great:

https://www.npmjs.com/package/ng-multiselect-dropdown

I created a stackblitz demonstrating the component with your data here

I hope this helps you further.

Answer 2

If you are using material design then this will help you out. Define form control and put value there which you want to display selected then define dropdown like this

<mat-select placeholder="Select Units" formControlName="unit">
                            <mat-option *ngFor="let unit ofUnit" [value]="unit.slug">
                              {{unit.unit_name}}
                            </mat-option>
                          </mat-select>