Search code examples
angularbootstrap-5bootstrap-accordion

Bootstrap accordion toggling issue

Hi I am using bootstrap accordion in angular, toggling is not happening for reference created stackblitz, not able to find the issue caused for toggling

https://stackblitz.com/edit/angular-jbaonj?file=src%2Findex.html

https://stackblitz.com/edit/angular-jbaonj?file=src%2Findex.html

Solution

  • According to ngx-bootstrap documentation the proper way of using the accordion is something like this:

    <accordion [isAnimated]="true">
  <accordion-group heading="Static Header">
    This content is straight in the template.
  </accordion-group>
  <accordion-group heading="Another group">
    <p>Some content</p>
  </accordion-group>
  <accordion-group heading="Another group">
    <p>Some content</p>
  </accordion-group>
  <accordion-group heading="Another group">
    <p>Some content</p>
  </accordion-group>
</accordion>

    But you are not using the angular components, but only the classes. Please use the correct components / directives like stated in the documentation.

    EDIT referring to comments:

    If you want to use bootstrap javascript functionality in your angular project, you should use a dedicated port for this like ng-bootstrap or ngx-bootstrap.

    You should not use plain bootstrap and and insert a script tag. Angular uses shadow dom and a lot of optimized magic to make the app performant. Using scripts that are not covered in the framework make them slower because they are not using angulars change detection, dom shadowing etc.

    So in your case, you already integrated ngx-bootstrap (npm install the stuff, add the module to your AppModule). After integration you can use the ngx-bootstrap components within your template like i already mentioned above.

    EDIT 2 because I am a nice guy:

    You had already added ngx-bootstrap in your original stackblitz but removed it in your current stackblitz. So for ngx-bootstrap look here: https://valor-software.com/ngx-bootstrap/#/documentation#getting-started

    Step 1 add ngx-bootstrap to your project

    ng add ngx-bootstrap

    Step 2 add the module you want to use in the imports array of app.module.ts

    //...
imports: [
    AccordionModule.forRoot()
]

    Step 3 go to your component and add the accordion to your template, like I already wrote above with <Accordion ...>

    Step 4 upvote and mark my answer. :)