title: Style in ngFor loop
body: <p>I have an app which I'm developing in Angular 2 (RC1). The menu is need to be created from the database. Data is delivered via Web Api in JSON form. I would like to build menu from the data recursively, to be sure that depth of the menu is not an issue.</p>
  
  <p>The problem is when I'm want to add class on particular row of ngFor loop, and the class is added to all rows instead of just one I want to.</p>
  
  <p>The code is looking something like this:</p>
  
  <p><strong>sidenav.component.ts</strong></p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  import { IMenu } from '../../../shared/models/menu.interface';
  import { MenuComponent } from './menu.component';
  
  @Component({
      moduleId: module.id,
      selector: 'sidenav',
      templateUrl: 'sidenav.component.html',
      directives: [MenuComponent]
  })
  export class SidenavComponent {
      @Input() menu: IMeni[]
  }
  </code></pre>
  
  <p><strong>sidenav.component.html</strong></p>
  
  <pre><code>...
  &lt;menu-view [menu]="menu"&gt;&lt;/menu-view&gt;
  ...
  </code></pre>
  
  <p><strong>menu.component.ts</strong></p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  import { IMenu } from '../../../shared/models/menu.interface';
  @Component({
      moduleId: module.id,
      selector: 'menu-view',
      templateUrl: 'menu.component.html',
      directives: [MenuComponent]
  })
  export class MenuComponent {
      isSelected: boolean = false;
      @Input() meni: IMeni[];
  
      onSelect(): void {
          this.isSelected = !this.isSelected;
      }
  }
  </code></pre>
  
  <p><strong>menu.component.html</strong></p>
  
  <pre><code>&lt;ul&gt;
       &lt;li  *ngFor="let item of menu; let frst=first"
             class="menu-list" 
             [ngClass]="{'active': 'isSelected', 'active': 'frst'}"&gt;
  
          &lt;a [routerLink]="[item.uri]" (click)="onSelect()" &gt; {{item.name}}&lt;/a&gt;
  
          &lt;meni-view [menu]="item.children"&gt;&lt;/meni-view&gt;
  
       &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>So, when I click on parent all parents become active, not only that particular one, what will be satisfying behaviour. What I do wrong?</p>