CODEWITHSUNDEEP
angularbootstrap-4ng-bootstrap
ArunM
ArunM

Reputation: 2314

Angular multi select dropdown

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

enter image description here

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

Upvotes: 4

Views: 81593

Answers (3)

ChrisS1918
ChrisS1918

Reputation: 126

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.

Upvotes: 11

Craig Oldfield
Craig Oldfield

Reputation: 99

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.

Upvotes: 2

Er Abdul Meman
Er Abdul Meman

Reputation: 173

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>

Upvotes: 3

Related Questions