title: Angular 2 change css by id
body: <p>I'm trying to change the menu css that was clicked by id, and when click on another menu all others lose their style, and only what was clicked wins the style.</p>
  
  <p>But I'm not making to do this, someone could help me?</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { NgClass } from '@angular/common';
  
  @Component({
      selector: 'my-header',
      template: `
          &lt;nav class="navbar navbar-default navbar-static-top"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;&lt;a [ngClass]="{'selectedClass': selected}" (click)="selectId($event)" id="1"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;   
                  &lt;li&gt;&lt;a [ngClass]="{'selectedClass': selected}" (click)="selectId($event)" id="2"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a [ngClass]="{'selectedClass': selected}" (click)="selectId($event)" id="3"&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a [ngClass]="{'selectedClass': selected}" (click)="selectId($event)" id="4"&gt;Menu 4&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      `,
      styles: [`
          .selectedClass {
              color: #cc0000;
              background-color: #ffffff;
          }
      `]
  })
  export class HeaderComponent {
      selected = false;
  
      selectId(event) {
          console.log(event.currentTarget.id);
          selected = true;
      }    
  }
  </code></pre>