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

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

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

what do you mean by multi dropdown? like nested menu or a tree? if its a tree then you could try looking at this material.angular.io/components/tree/overview — Rogelio
– Rogelio, Commented Mar 13, 2019 at 7:20

ChrisS1918 · Accepted Answer · 2019-03-13 08:25:07Z

11

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.

edited Mar 13, 2019 at 8:25

answered Mar 13, 2019 at 7:47

ChrisS1918

1265 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Saad Bashir Over a year ago

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

ChrisS1918 Over a year ago

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 Over a year ago

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

sgryt Over a year ago

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

Er Abdul Meman · Accepted Answer · 2019-03-13 07:18:05Z

3

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>

answered Mar 13, 2019 at 7:18

Er Abdul Meman

1731 silver badge9 bronze badges

1 Comment

Elad Ben-David Over a year ago

Adding input inside the select element wont' be enough?

<option *ngFor="let cust_list of customer_list" [value]="cust_list.id">                         <input type="checkbox" [(ngModel)]="cust_list.isSelected"> {{ cust_list.account_name }} [{{ cust_list.id }}]                     </option>

Craig Oldfield · Accepted Answer · 2019-03-13 07:18:22Z

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.

Collectives™ on Stack Overflow

Angular multi select dropdown

3 Answers 3

4 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Linked

Related