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

Solution 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.

Solution 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>

Solution 3

This codepen has a Bootstrap 4 multiselect very similar to what you are showing. link. When I added select into the first one such as:

<select class="custom-select" id="basic" multiple="multiple">
   <option value="cheese" selected>Cheese</option>
   <option value="tomatoes">Tomatoes</option>
   <option value="mozarella">Mozzarella</option>
   <option value="mushrooms">Mushrooms</option>
   <option value="pepperoni">Pepperoni</option>
   <option value="onions">Onions</option>
</select>

It worked as expected.

Comments

[Saad Bashir]

trying to use your stackblitz demonstration but resulting in RROR TypeError: Cannot read property 'idField' of undefined

[ChrisS1918]

Here it works just fine on different computers. Which browser do you use? Are you receiving any errors in the dev tools in network tab or in the javascript console?

[Saad Bashir]

Thank you for the kind response. Using Chrome, and getting error in Javascript console

[Sgryt]

Awesome. I have tried a few libraries for multi-select before, but ng-multiselect-dropdown fits way better than others.