title: How can I set a class to the first Item in array by default and remove it and apply to another item on click?
body: <p>In Angular you can use ngClass to conditionally apply your class like so. </p>
  
  <pre><code>&lt;div
      *ngFor="let group of step.groups; let firstItem = first;"
      class="layout--stepper__subgroup"
      ngClass]="{'is-active': group.prop === activeProp}"
      (click)="scrollToSection(group)"&gt;
      p class="t-data"&gt;{{group.header}}&lt;/p&gt;
  &lt;/div&gt;
  
  scrollToSection(group) {
      this.activeProp = group.prop;
      let scroll = document.querySelector(`#${group.prop}`).scrollIntoView();
  }
  </code></pre>
  
  <p>Now whenever I click the item in my list the class <code>is-active</code> will be applied to that specific list item. However, what if I want to apply <code>is-active</code> to the first item on the list by default?</p>
  
  <p>If I change my code to be:</p>
  
  <pre><code>ngClass]="{'is-active': group.prop === activeProp || firstItem}"
  </code></pre>
  
  <p>Now both the first item on the list and the item clicked will both have the <code>is-active</code> class. How can I set the first item on the list to have the <code>is-active</code> class by default and then remove it when I click another item on the list?</p>