How to set active class on list of buttons
<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>