title: how to add a class to one a element and remove a class from all siblings a elements angular
body: <p>I have a simple menu bar across the top of my page. I would like to click an  element and have the inverse color/background-color.  Obviously i need to be able to reset all my sibling  elements back to the default color/background-color before changing the style on the clicked element.</p>
  
  <p>so far my click event function looks like this</p>
  
  <pre><code>onSelect(event, source: Source): void {
      console.log(event.target);
  
      //reset all a elements do background-color:white and color:white
      var siblings = event.target.parentNode.children;
      for(var i=0; i&lt;siblings.length; i++) {
        siblings[i].style.backgroundColor = "white";
        siblings[i].style.color = "black";
      }
  
      event.target.style.backgroundColor = "black";
      event.target.style.color = "white";
      this._sharedService.publishData(source.id);
  
    }
  </code></pre>
  
  <p>Is there a better way or a more "angularic" way or cleaner way to achieve this in Angular 2?</p>
  
  <p>This is what i am trying now but the class does not change from unsel-source to sel-source</p>
  
  <p>My source.component.html file looks like this:</p>
  
  <pre><code>&lt;nav id="nav" class="fixed sources-main"&gt;
    &lt;div class="flex flex-wrap pl1 border-bottom"&gt;
        &lt;a *ngFor="let source of sources; let i = index"
        [ngClass]="{'sel-source':isSelected === i}" 
        (click)="onSelect(i, source)" 
        class="h5 bold mr1"&gt;
          {{source.name}}
        &lt;/a&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>the source.component.ts file looks like this:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {SourcesService} from './sources.service'
  import { Source } from './source';
  
  import { SharedService } from '../shared.service';
  
  @Component({
    selector: 'app-sources',
    templateUrl: './sources.component.html',
    styleUrls: ['./sources.component.css'],
    providers:[SourcesService]
  })
  export class SourcesComponent implements OnInit {
  
    sources : Source[];
    isSelected;
  
    constructor(sourceService: SourcesService, private _sharedService: SharedService) { 
      sourceService.getSources().subscribe(sources =&gt; this.sources = sources);
    }
  
    ngOnInit() {
    }
  
    onSelect(index, source: Source): void {
      this.isSelected = index;
      this._sharedService.publishData(source.id);
    }
  
  }
  </code></pre>
  
  <p>my styles.css file</p>
  
  <pre><code>body, a {
      font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Open Sans,Helvetica Neue,Helvetica,sans-serif;
      line-height: 1.5;
      margin: 0;
      color: #111;
      background-color: #fff;
  }
  
  .sources-main {
      width:100%;
      background-color: #fff;
  }
  
  .articles-main {
      padding-top: 25px;
  }
  
  .sel-source {
      color:white;
      background-color: black;
  }
  </code></pre>