Angular nested dropdown

Question

I am attempting to create a dropdown list in Angular containing sub-items (as in the image but with all options selectable). Does anybody please know how to achieve this in Angular using the < select > tag so that I don't have to change other code within my application, as I would if changing to an unordered list etc.

Thanks :)

dropdown list with sub-items

zhonglin yang · Accepted Answer · 2020-10-30 10:27:13Z

1

Consider using the groups of options provided by Angular/Material library. See the demo.

answered Oct 30, 2020 at 10:27

zhonglin yang

716 bronze badges

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

Comments

Kavinda Senarathne · Accepted Answer · 2020-10-30 10:27:23Z

0

Use class= "dropdown-submenu"

<div class="btn-group dropdown">
  <button class="dropdown-toggle">Toggle</button>
  <ul class="dropdown-menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li class="dropdown-submenu">
      Sub List
      <ul class="dropdown-menu">
        <li>Submenu Item 1</li>
        <li>Submenu Item 2</li>
      </ul>
    </li>
  </ul>
</div>

or refer this https://mdbootstrap.com/support/general/how-to-create-a-nested-dropdown/

answered Oct 30, 2020 at 10:27

Kavinda Senarathne

2,02015 silver badges16 bronze badges

Comments

adhs91 · Accepted Answer · 2020-10-30 10:57:10Z

0

Grouping sub-items can be achieved using angular material library.

For multi select drop down you just have to add multiple property in select tag element for selecting multiple options.

see the stackblitz demo for reference.

For more such functionality using angular material, please refer angular material

answered Oct 30, 2020 at 10:57

adhs91

1521 silver badge7 bronze badges

Collectives™ on Stack Overflow

Angular nested dropdown

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related