CODEWITHSUNDEEP
angulartwitter-bootstrap
Patrick
Patrick

Reputation: 21

Angular 4: Bootstrap's collapse does not work using data-target attribute

I am still new to Angular 4 (using Angular-CLI). I somehow do not manage to get simple Bootstrap Collapse work.

The following is my code for the collapse:

<div *ngFor="let idea of ideas" class="panel panel-default">
  <div class="panel-heading">{{ idea.title }}</div>
  <div class="panel-body">
    <cite>{{ idea.author }}</cite>
    <p>{{ idea.description }}</p>
    <button type="button" class="btn btn-primary" data-toggle="collapse" [attr.data-target]="'#'+idea._id" aria-expanded="false" [attr.aria-controls]="idea._id">More</button>
  </div>
  <div [attr.id]="idea._id" class="collapse"><p>Show Details</p></div>
</div>

Update:

I did import all the relevant Bootstrap and jQuery scripts. As you can see below, the IDs do match. I don't know why it does not work? Is there an issue with Angular 5 and Bootstrap's Collapse?

Screenshot

Upvotes: 2

Views: 10366

Answers (3)

Aditya Mittal
Aditya Mittal

Reputation: 1771

In my case, I had to replace [attr.data-target]="'#collapse'+index" with [attr.data-bs-target]="'#collapse'+index"

I also replaced data-parent with data-bs-parent and data-toggle with data-bs-toggle.

The issue was I didn't have the -bs- but neither does the example given on the site: https://getbootstrap.com/docs/4.3/components/collapse/

I found this out by comparing it against the page source code on https://getbootstrap.com/docs/5.0/examples/sidebars/#

I am on Bootstrap 5.1.3 and those docs are for 4.3 so perhaps this is a Bootstrap version issue, but this comment might help me or someone fix this issue again later.

Upvotes: 0

Adi.P
Adi.P

Reputation: 400

The first issue that I see here is that you are missing JQuery. If you have included, then you might have done it after bootstrap.js(min.js). You should fix that as it is required primarily to toggle elements.

After Reading your comments I see where the problem is. You are using bootstrap 3 and looking at examples of bootstrap 4 to achieve what you want.

For bootstrap 3, you need to use href="#id" to toggle it instead of data-target="#id".

Upvotes: -1

Siddhesh T
Siddhesh T

Reputation: 446

I was facing a similar issue with Angular 5 and Bootstrap 4, when I was trying to make collapsibles in *ngFor. After debugging I found that data-target="#someId" is rendered as target="#someId" and that's why the bootstrap collapse wasn't working.

I found my solution in this answer. The solution to your specific question would be to use:

attr.data-target="#{{idea._id}}"

Upvotes: 10

Related Questions