Dropdown inside dropdown Angular

Question

I have this html that is supposed to be a dropdown inside another dropdown. The hierarchy is:

Dropdown
  |_ First Dropdown
  |     |_ aaa
  |     |_ bbb
  |     |_ ccc
  |_ Second Dropdown
        |_ ddd

They look fine, but when I press on First Dropdown, the dropdown with values aaa, bbb, ccc won't show up. Same with Second Dropdown.

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li>
      <div class="btn-group dropright">
        <a class="btn dropdown-toggle" data-toggle="dropdown">
          First Dropdown
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li>aaa</li>
          <hr>
          <li>bbb</li>
          <hr>
          <li>ccc</li>
        </ul>
      </div>
    </li>
    <hr>
    <li>
      <div class="btn-group dropright">
        <a class="btn dropdown-toggle" data-toggle="dropdown">
          Second Dropdown
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li>ddd</li>
        </ul>
      </div>
    </li>
  </ul>
</div>

Which seems to be the problem? Thank you for your time!

How is this related with angular? I just see bootstrap classes in your html — Vahid
– Vahid, Commented Nov 23, 2018 at 8:52
I wanted to make sure in case somebody will give me a solution, it won't use javascript. — Tenzolinho
– Tenzolinho, Commented Nov 23, 2018 at 8:54
I am struggling to understand the purpose of this: so you have two dropdown inside one? can't you have two and populate the second from the first? — Jack M
– Jack M, Commented Nov 23, 2018 at 8:56
Please use HTML <optgroup> Tag w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup — son pham
– son pham, Commented Nov 23, 2018 at 9:00
Inside First Dropdown and Second Dropdown I will have many values, I don't want them all to be visible.. — Tenzolinho
– Tenzolinho, Commented Nov 23, 2018 at 9:04

Nikolai Kiefer · Accepted Answer · 2018-11-23 09:06:48Z

1

So you can kinda achieve this with angular material mat-select

you have <mat-select> there wich is a kinda dropdown menu and <mat-option> wich is an entry in a mat-select

however you can use a mat select inside of a mat option wich itself is a dropdown inside a dropdown.

<mat-select>entry
 <mat-option>hu
  <mat-select>
   <mat-option>hallo</mat-option>
  </mat-select>
 </mat-option>
 <mat-option>hi
  <mat-select>hello
   <mat-option>hallo</mat-option>
  </mat-select>
 </mat-option>
 <mat-option>hui
  <mat-select>
   <mat-option>hallo</mat-option>
  </mat-select>
 </mat-option>
</mat-select>

answered Nov 23, 2018 at 9:06

Nikolai Kiefer

6136 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

Dropdown inside dropdown Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related