CODEWITHSUNDEEP
angularbootstrap-4accordionngfor
Andreea Popa
Andreea Popa

Reputation: 49

Accordion in ngFor Angular

I have an ngFor and for each item i have a button to show some extra details (I'm using bootstrap accordion). My problem is that i want to open only the accordion regarding the current item (not all).

I will show you what i tried with the index but it's not working.

That's my ngFor:

<ul *ngFor="let star of stars; index as i;">
...
</ul

This is my button:

<button type="button" data-toggle="collapse" attr.[data-target]="'collapse' + i" aria-expanded="false"></button>

This is the accordion:

<div class="collapse" [id]="'collapse' + i">
<div class="card card-body">
...

This is my error:

ERROR DOMException: Failed to execute 'setAttribute' on 'Element': 'attr.[data-target]' is not a valid attribute name.

Can you help me? Thank you!

Upvotes: 0

Views: 3071

Answers (1)

Marc
Marc

Reputation: 1886

try this:

<div class="collapse" [attr.id]="'collapse' + i">

<button type="button" data-toggle="collapse" [attr.data-target]="'#collapse' + i" aria-expanded="false"></button>

if this is not what you want, then it would be nice to have a stackblitz :-)

see: Attribute, class, and style bindings

Upvotes: 4

Related Questions