Search code examples
angularng-bootstrap

Collapse does not work using ng-bootstrap


I am using Angular and ng-bootstrap for the first time and I am having a problem with the Collapse component. All I am trying to do is to collapse / expand a div using Bootstrap. My issue is that the button is not working and the a (link) is actually navigating away (taking href as a literal hyperlink to http://#collapseExample ! It is as if the site does not recognize bootstrap, but the ngb-accordion actually works.

I am puzzled as to what I may be doing wrong, any help would be much appreciated.

The code is taken from an official bootstrap site (https://getbootstrap.com/docs/4.0/components/collapse/) though it is possible that Bootstrap 4 and 5 are different - I am using the latest version of Angular and ngbootstrap.

<p>
    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false"
        aria-controls="collapseExample">
        Link with href
    </a>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample"
        aria-expanded="false" aria-controls="collapseExample">
        Button with data-target
    </button>
</p>
<div class="collapse" id="collapseExample">
    <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim
        keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
    </div>
</div>

EDIT: Here is some additional information:

I have "@ng-bootstrap/ng-bootstrap": "^12.1.2", in the dependencies section of my package.json.

I also have @import '~bootstrap/scss/bootstrap'; in my styles.css.

app.module.ts has import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; where NgbModule is added in the imports section of the @NgModule declaration.


Solution

  • ngb-bootstrap is not bootstrap

    Ngb-bootstrap is a library of Angular components that use only bootstrap.css (nor bootstrap.bundle.min.js nor popper.min.js nor bootstrap.min.js)

    So, to use ngb-bootstrap you should install as is showed in the docs, download the bootstrap.min.css (e.g. you download in a folder css/bootstrap) and add in angular.json the .css in

    "styles": [
          "src/styles.css",
          "css/bootstrap/bootstrap.min.css"
        ],
    

    Then use a collapse as it's shoed in the docs of ng-boostrap, not in the docs of bootstrap