0

I'm having trouble making the "collapse" effect of the menu work using bootstrap and angular, I set up the separate layout and everything is working, however, when I added in the angular, the menu simply does not work.

I've been reading, and I saw that there may be some conflicts, I saw some tips to replace the "href" with "data-target", but nothing worked, I'd like your help.

html

  <!-- Inicio Sidebar -->
  <div class="col-sm-2" id="sidebar-collapse"> 
      <div class="nav-side-menu bg-dark" >

          <div class="sidebar-profile-pic"></div>
          <span class="nav-link sidebar-profile-name">Douglas Nickson</span>
          <div class="divider"></div>

          <ul class="nav" style="display:block;">
              <li><a href="index.html"><i class="fa-lg fa fa-dashboard" aria-hidden="true"></i> Dashboard</a></li>
              <li class="parent"><a data-toggle="collapse" href="#modulo-item-1">
                  <i class="fa-lg fa fa-book">&nbsp;</i> Modulo <span data-toggle="collapse" href="#sub-item-1" class="icon pull-right"><em class="fa fa-plus"></em></span></a>
                  <ul class="children collapse" id="modulo-item-1">
                      <li><a class="" href="cadastrar-modulo.html">
                          <span class="fa fa-arrow-right">&nbsp;</span> Cadastrar Modulo
                      </a></li>
                      <li><a class="" href="#">
                          <span class="fa fa-arrow-right">&nbsp;</span> Gerenciar Modulo
                      </a></li>
                  </ul>       
              </li>
            </ul>
    </div>
   </div>

angular-cli.json

      "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/font-awesome/css/font-awesome.min.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/popper.js/dist/popper.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../src/js/scripts.js"
  ],

I already installed the bootstrap, and the dependencies I used, but it still does not work, any tips on how to fix this? Thank you.

DouglasNickson
  • 135
  • 1
  • 3
  • 15
  • 1
    https://valor-software.com/ngx-bootstrap/#/collapse Refer this one. Angular project wont support Jquery. So better use ngx-bootstrap – pradeep kumar Feb 27 '18 at 04:18
  • 1
    this one is also good https://ng-bootstrap.github.io/#/home – Ismail Farooq Feb 27 '18 at 05:11
  • I was having a similar issue before and i ended up using the cdn for bootstrap 4. so from what i was able to understand is that the version I downloaded was not up to date hence why i got that similar problem to yours. hope this helps – cacev000 Feb 28 '18 at 18:29
  • @cacev000 thanks for your help, but i'm using the latest version of bootstrap, i'm trying to use the tips of the guys above. – DouglasNickson Feb 28 '18 at 19:17

1 Answers1

0

As Ismail Farooq already advised, I have installed ng-bootstrap from here ng-bootstrap.github.io/#/home and then used their collapse component enter link description here

JanBrus
  • 1,198
  • 9
  • 13