title: How to set active class on list of buttons
body: <p>I have an <strong>Angular 2</strong> app that has a component that contains a list of filter buttons.
  One of them can be <strong>active</strong> at any one time. 
  The button definitions come from some <strong>json</strong> and will one day be sent from the server.</p>
  
  <p>My problem is how to set a style on the currently clicked button.
  Should I set it in the click event handler? So how do I know which button was clicked?</p>
  
  <p>My <strong>Component</strong> looks like this :</p>
  
  <pre><code>import { Component, EventEmitter, Output }  from '@angular/core';
  
  @Component({
      selector: 'tileFilter',
      template: require('./tileFilter.component.html'),
      styles: [require('.//tileFilter.component.scss').toString()]
  })
  
  export class TileFilterComponent {
  
  @Output() onCategorySelected = new EventEmitter&lt;number&gt;();
  
  public activeClass: string = "nonactive"
  
   private categories: any[] = [
      { "Id": 0, "Name": "All" },
      { "Id": 3, "Name": "Popup" },
      { "Id": 4, "Name": "Cafe" },
      { "Id": 5, "Name": "Pub or bar" },
      { "Id": 9, "Name": "Restaurant" }
  ];
  
      constructor() {}
  
      onClick(category:any){
          this.activeClass ="active";
          this.onCategorySelected.emit(&lt;number&gt;category.Id);
      }
  
  }
  </code></pre>
  
  <p>And my <strong>HTML</strong> looks like this :</p>
  
  <pre><code>&lt;ul class="tile-filters inline-list inline-list--sm unstyled-list collapse"&gt;
    &lt;li *ngFor="let c of categories"&gt;
        &lt;button class="button button--recede button--sm {{activeClass}}" (click)="onClick(c)"&gt;{{c.Name}}&lt;/button&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>What's the common pattern for this?</p>