Source:  Twitter logo

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

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.

9 users liked answer #0dislike answer #09
ChrisS1918 profile pic
ChrisS1918

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>
2 users liked answer #1dislike answer #12
Er Abdul Meman profile pic
Er Abdul Meman

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.

1 users liked answer #2dislike answer #21
Craig Oldfield profile pic
Craig Oldfield

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).