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?

Answer 1

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