title: angular2 toggle icons inside ngFor
body: <p>Can some one please let me know how to toggle icons while doing ngFor?</p>
  
  <p>Problem Statement:
  I'm using *ngFor to loop through an array and display category names. On click of day I need to open an accordian and show category details (I can do this).
  Once accordian opens I need to replace fa-plus icon with fa-minus and vice-versa and I need to do this only for clicked day.</p>
  
  <p>How can I achieve this effectively?</p>
  
  <pre><code>this.categoryList = [
  {type: 'space', name: 'Space'},
  {type: 'energy', name: 'Energy'},
  {type: 'comfort', name: 'Comfort'},
  {type: 'maintenance', name: 'Maintenance'},
  {type: 'reporting', name: 'Reporting'}
  ];
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="{{category.type}}" *ngFor="let category of categoryList"&gt;
      &lt;div data-toggle="collapse" [attr.href]="'#'+'category-'+category.type"&gt;
      &lt;div class="title {{category.name}}"&gt;{{category.name}}&lt;/div&gt;
      &lt;div&gt;
          &lt;i class="fa fa-plus"&gt;&lt;/i&gt; //needs to toggle between plus and minus
                  &lt;i class="fa fa-minus"&gt;&lt;/i&gt; //needs to toggle between plus and minus
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="collapse" id="category-{{category.type}}"&gt;
          //details
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>