Dropdown inside dropdown Angular












1















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!






html angular







share|improve this question























  • How is this related with angular? I just see bootstrap classes in your html

    – Vahid
    Nov 23 '18 at 8:52











  • I wanted to make sure in case somebody will give me a solution, it won't use javascript.

    – Tenzolinho
    Nov 23 '18 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
    Nov 23 '18 at 8:56






  • 2





    Please use HTML <optgroup> Tag w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

    – son pham
    Nov 23 '18 at 9:00











  • Inside First Dropdown and Second Dropdown I will have many values, I don't want them all to be visible..

    – Tenzolinho
    Nov 23 '18 at 9:04
















1















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!






html angular







share|improve this question























  • How is this related with angular? I just see bootstrap classes in your html

    – Vahid
    Nov 23 '18 at 8:52











  • I wanted to make sure in case somebody will give me a solution, it won't use javascript.

    – Tenzolinho
    Nov 23 '18 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
    Nov 23 '18 at 8:56






  • 2





    Please use HTML <optgroup> Tag w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

    – son pham
    Nov 23 '18 at 9:00











  • Inside First Dropdown and Second Dropdown I will have many values, I don't want them all to be visible..

    – Tenzolinho
    Nov 23 '18 at 9:04














1












1








1








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!






html angular







share|improve this 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!






html angular




html angular






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 23 '18 at 8:42









TenzolinhoTenzolinho

30015




30015













  • How is this related with angular? I just see bootstrap classes in your html

    – Vahid
    Nov 23 '18 at 8:52











  • I wanted to make sure in case somebody will give me a solution, it won't use javascript.

    – Tenzolinho
    Nov 23 '18 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
    Nov 23 '18 at 8:56






  • 2





    Please use HTML <optgroup> Tag w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

    – son pham
    Nov 23 '18 at 9:00











  • Inside First Dropdown and Second Dropdown I will have many values, I don't want them all to be visible..

    – Tenzolinho
    Nov 23 '18 at 9:04



















  • How is this related with angular? I just see bootstrap classes in your html

    – Vahid
    Nov 23 '18 at 8:52











  • I wanted to make sure in case somebody will give me a solution, it won't use javascript.

    – Tenzolinho
    Nov 23 '18 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
    Nov 23 '18 at 8:56






  • 2





    Please use HTML <optgroup> Tag w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

    – son pham
    Nov 23 '18 at 9:00











  • Inside First Dropdown and Second Dropdown I will have many values, I don't want them all to be visible..

    – Tenzolinho
    Nov 23 '18 at 9:04

















How is this related with angular? I just see bootstrap classes in your html

– Vahid
Nov 23 '18 at 8:52





How is this related with angular? I just see bootstrap classes in your html

– Vahid
Nov 23 '18 at 8:52













I wanted to make sure in case somebody will give me a solution, it won't use javascript.

– Tenzolinho
Nov 23 '18 at 8:54





I wanted to make sure in case somebody will give me a solution, it won't use javascript.

– Tenzolinho
Nov 23 '18 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
Nov 23 '18 at 8:56





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
Nov 23 '18 at 8:56




2




2





Please use HTML <optgroup> Tag w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

– son pham
Nov 23 '18 at 9:00





Please use HTML <optgroup> Tag w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

– son pham
Nov 23 '18 at 9:00













Inside First Dropdown and Second Dropdown I will have many values, I don't want them all to be visible..

– Tenzolinho
Nov 23 '18 at 9:04





Inside First Dropdown and Second Dropdown I will have many values, I don't want them all to be visible..

– Tenzolinho
Nov 23 '18 at 9:04












1 Answer
1






active

oldest

votes


















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>





share|improve this answer
























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53443206%2fdropdown-inside-dropdown-angular%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    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>





    share|improve this answer




























      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>





      share|improve this answer


























        1












        1








        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>





        share|improve this answer













        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>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 23 '18 at 9:06









        Nikolai KieferNikolai Kiefer

        196210




        196210
































            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53443206%2fdropdown-inside-dropdown-angular%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            -