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

Question

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?

Did you inspect the rendered HTML to ensure the `data-target` and `id` attributes are properly set? — Carol Skelly, Mar 22 '18 at 13:12
From your description everything should work. So I think you didn't provide here important detail to let us help you. Could you please share your example via https://github.com/ or http://plnkr.co/ ? — Sergii, Mar 22 '18 at 13:26
@ZimSystem: no, I did not yet inspect the rendered version. Maybe there is a mismatch between data-target value and id. — Patrick, Mar 22 '18 at 14:02

score 10 · Answer 1 · answered Apr 26 '18 at 10:27

10

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}}"

answered Apr 26 '18 at 10:27

Siddhesh T

406
1
5
14

I faced this issue with Angular 6 and attr.data-target is being rendered as attr.data-target also, do you know how to fix this with Angular 6? – Sherwin Ablaña Dapito Sep 17 '18 at 03:55
I could help by seeing the code maybe... Something else could be the cause of the problem @SherwinAblañaDapito – Siddhesh T Sep 24 '18 at 10:30
hero ! You saved my day – Enrico May 02 '20 at 17:19

score 0 · Answer 2 · answered Aug 31 '22 at 11:02

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.

Adi.P · Answer 3 · 2018-04-26T11:03:28.527

-1

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".

edited Apr 26 '18 at 11:03

answered Apr 26 '18 at 10:33

Adi.P

370
1
12

Is this the issue? Wrong bootstrap version? – Adi.P Apr 26 '18 at 19:21

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

3 Answers3

Linked