CODEWITHSUNDEEP
angularsemantic-ui
JSB
JSB

Reputation: 231

Dynamic property binding inside ngFor

i am trying to bind a toggle for displaying content using [suiCollapse]. the problem is the way i am binding them now they all have the same name and thus they all open when i click on the icon.

I tried using the index as a modifier but it didn't work. example: (click) = "collapse+{{index}} = !collapse+{{index}}" 

<div *ngFor="let item of[0,1,2,3,4,5,6,7] let i=index" class="ui segment">
 <div class="ui grid middle aligned">
   <div (click)="collapse = !collapse" class="one wide column center aligned">
    <i class="blue large toggle down icon"></i>
  </div>

 <div [suiCollapse]="!collapse" class="ui grid center aligned">
  <div class="column">
    <p>Content of the panel.</p>
    <p>Content of the panel.</p>
    <p>Content of the panel.</p>
    <p>Content of the panel.</p>
    <p>Content of the panel.</p>  
  </div>
</div>

any help is appreciated. I am trying to do this bus only using the template but if its not possible i can put some logic inside the component.

Upvotes: 0

Views: 6794

Answers (1)

user4676340
user4676340

Reputation: 

*ngFor="let item of[0,1,2,3,4,5,6,7] let i=index"

Why would you use the index when your array is made of indexes ?

And you don't seem to comprehend the Angular syntax : writing an input/output such as (click) or [myVar] will evaluate the content of this attribute as JS.

So if you write 

(click) = "collapse+{{index}} = !collapse+{{index}}"

Angular will try to do this : 

collapse+{{index}} = !collapse+{{index}}

And that isn't Javascript.

If you want it to work, here it is : 

<div *ngFor="let item of [0,1,2,3,4,5,6,7]" class="ui segment">
 <div class="ui grid middle aligned">
   <div (click)="collapse[item] = !collapse[item]" class="one wide column center aligned">
    <i class="blue large toggle down icon"></i>
  </div>

 <div [suiCollapse]="!collapse[item]" class="ui grid center aligned">
  <div class="column">
    <p>Content of the panel.</p>
    <p>Content of the panel.</p>
    <p>Content of the panel.</p>
    <p>Content of the panel.</p>
    <p>Content of the panel.</p>  
  </div>
</div>

Remember to declare your variable collapse as an array/object of booleans !

Upvotes: 1

Related Questions