title: ngClass switch between li background-color angular 2
body: <p>Actual behavior<br>
  When I click any submenu all submenus change the color.</p>
  
  <p>Desired behavior<br>
  When a submenu1 is clicked only that one should change the color, when submenu2 is clicked only that one should change and submenu1(and any other submenu that isn't submenu2 even the submenus inside any other main menu) should get back to it´s original color.</p>
  
  <p>What I´ve is the following;</p>
  
  <pre><code>&lt;nav class="navigation"&gt;
      &lt;ul class="mainmenu"&gt;
          &lt;li class="dropdown-content" (click)="onClickHome()"&gt;&lt;a href='javascript:void(0)'&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li [class]="hideUsability" *ngFor="let menu of entities"&gt;
              &lt;a [ngClass]="{'entities-list__title--active' : menu.isOpen}" (click)="onClickMenu(menu)"&gt;{{menu.entity_name}}&lt;/a&gt;
              &lt;ul class="dropdown-content" &gt;
                  &lt;li [ngClass]="{'btn-add': !menu.isOpen, 'btn-remove': menu.isOpen}" [hidden]="!menu.isOpen" (click)="onClickSubmenu(value.value_id)" *ngFor="let value of menu.values"&gt;&lt;a href='javascript:void(0)'&gt;{{value.value_name}}&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Component (Angular 2)</p>
  
  <pre><code>    onClickHome(){
          this.closeAllMenus();
          this.router.navigate(['welcome'], { skipLocationChange: true});
      }
  
      onClickMenu(menu){
          if (!menu.isOpen){
              this.closeAllMenus();
          }
          menu.isOpen = !menu.isOpen;
      }
  
      onClickSubmenu(value_id: number){
          if(value_id == 2){
              this.router.navigate(['welcome/metrics.html'], { skipLocationChange: true});
          } else{
              this.router.navigate(['welcome/extractor.html'], { skipLocationChange: true});
          }
      }
  
      closeAllMenus(){
          this.entities.forEach((menu) =&gt;{
              menu.isOpen = false;
          });
      }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.btn-add {
      background-color: red;
  } 
  
  .btn-remove {
      background-color: green;
  }
  </code></pre>