title: Angular2/Typescript toggling CSS class on and off (simulate radio buttons)
body: <p>I have a series of UL elements with corresponding LI elements in the view. Together, they all need to function like a radio button group (all 9 anchors in one group), meaning only one can be "clicked" at a time (when another is clicked, the previous selected is "unclicked"). These anchors (in the LI) are going to be in charge of routing in a md-sidenav, which can be hidden or shown, so the clicked class needs to persist until something else is clicked to give the user a hint as to where they are.</p>
  
  <p><a href="http://plnkr.co/edit/ngErlsytrI3hC0s95u22?p=preview" rel="nofollow">Plunker</a></p>
  
  <p>I'm new to both Angular2 and Typescript, so I'm not sure if I'm missing some sort of handy Angular feature that would take care of this for me. In jQuery/JS, I'd add a class to all of the anchors so I could select them easily all at once, and when a new anchor is clicked, I'd first use .removeClass() to remove the clicked class from all the anchors (this is overkill but it would clear out the one that is clicked), and then I would use .addClass('.anchorClicked') to add the clicked class to the target anchor. Angular's [routerLink] can handle the routing part.</p>
  
  <p>As you can see, my markup is sort of architected to support that jQuery solution I had in mind. This is mostly because I can't find a way to explicitly remove a CSS class using Typescript. I know I can use [style.color]= blah and control the styles using interpolation, but I don't want to have to store a style value for every single anchor and every single style rule. There has to be an easy way to do this!</p>
  
  <pre><code>&lt;md-sidenav #start mode="over" class="sideDrawer"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#" class="anchor" id="a11" (click)="sideNavAlert($event)"&gt;anchor 1.1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="anchor" id="a12" (click)="sideNavAlert($event)"&gt;anchor 1.2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="anchor" id="a13" (click)="sideNavAlert($event)"&gt;anchor 1.3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#" class="anchor" id="a21" (click)="sideNavAlert($event)"&gt;anchor 2.1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="anchor" id="a22" (click)="sideNavAlert($event)"&gt;anchor 2.2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="anchor" id="a23" (click)="sideNavAlert($event)"&gt;anchor 2.3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#" class="anchor" id="a31" (click)="sideNavAlert($event)"&gt;anchor 3.1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="anchor" id="a32" (click)="sideNavAlert($event)"&gt;anchor 3.2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="anchor" id="a33" (click)="sideNavAlert($event)"&gt;anchor 3.3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/md-sidenav&gt;
  </code></pre>