title: How can I make the first item in my *ngFor active by default?
body: <p>I have a radio button component in Angular 2. </p>
  
  <pre><code>&lt;div
      class="states"
      *ngFor="let state of states; let i = index"
      [ngClass]="{'selected': showElement === state}"
      (click)="trackCurrentState(state)"&gt;
      &lt;div class="radio"&gt;
          &lt;div class="outside"&gt;
              &lt;div
                  class="inside"
                  *ngIf="showElement === state"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;p2&gt;{{state.name}}&lt;/p2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The *ngFor loops through them and displays them inside of another component. On load my variable 'showElement' returns undefined until the user clicks one of the radio buttons. So on load I have a group of radio buttons, but none of them are selected until the user clicks one. I would like the first button in the group of radio buttons (the first item in the array of objects) to be selected by default. I need to apply my class 'inside' to just the first radio button until the user clicks another one. How can I accomplish this?</p>