title: Dynamic property binding inside ngFor
body: <p>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.</p>
  
  <p>I tried using the index as a modifier but it didn't work. 
  example: 
  <code>
  (click) = "collapse+{{index}} = !collapse+{{index}}"</code> </p>
  
  <pre><code>&lt;div *ngFor="let item of[0,1,2,3,4,5,6,7] let i=index" class="ui segment"&gt;
   &lt;div class="ui grid middle aligned"&gt;
     &lt;div (click)="collapse = !collapse" class="one wide column center aligned"&gt;
      &lt;i class="blue large toggle down icon"&gt;&lt;/i&gt;
    &lt;/div&gt;
  
   &lt;div [suiCollapse]="!collapse" class="ui grid center aligned"&gt;
    &lt;div class="column"&gt;
      &lt;p&gt;Content of the panel.&lt;/p&gt;
      &lt;p&gt;Content of the panel.&lt;/p&gt;
      &lt;p&gt;Content of the panel.&lt;/p&gt;
      &lt;p&gt;Content of the panel.&lt;/p&gt;
      &lt;p&gt;Content of the panel.&lt;/p&gt;  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>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. </p>