How to collapse to open each one?

Question

Angular

There are many elements:

<button type="button" class="btn btn-primary" (click)="isCollapsed = !isCollapsed"
        [attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic1">Toggle collapse
</button>
<hr>
<div id="collapseBasic1" [collapse]="isCollapsed">
  <div class="well well-lg card card-block card-header">Some content</div>
</div>

<button type="button" class="btn btn-primary" (click)="isCollapsed = !isCollapsed"
        [attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic1">Toggle collapse
</button>
<hr>
<div id="collapseBasic1" [collapse]="isCollapsed">
  <div class="well well-lg card card-block card-header">Some content</div>
</div>

the component says:
isCollapsed = false;

now they all open on click, how to make them open each on their own button?

Answer 1

I found your example and tweaked it a bit.
No need to produce extra variables.
https://stackblitz.com/edit/ngx-bootstrap-collapse...