*ngIf with [ngClass] CSS Class Switching

/*
There are probably more efficient ways of doing this, but this works:
1. The li click event sets activeTab to true or false:
   (click)="activeTab = tab; false;"
2. Based on that, we can set the class accordingly:
   [ngClass]="{'active-tab': tab === activeTab, 'inactive-tab': tab !== activeTab}"
*/

<ul id="tab-list" class="tab-list contain" *ngIf="!isEditing">
  <li id="tab-button" class="tab-button" (click)="activeTab = tab; false;" *ngFor="let tab of tabs" (mouseover)="tabHover=true" (mouseout)="tabHover=false" [ngClass]="{'active-tab': tab === activeTab, 'inactive-tab': tab !== activeTab}">
    <a [ngClass]="{'tab-link': true, 'active': tab === activeTab }" href="#" shleavesiteexception=true>
   	<div id="tab-title" class="tab-title" *scText="tab.fields.data.datasource.tabTitle.jss"></div>
    <div class="tab-highlight" [class.highlight]="(activeTab === tab)&&(tabHover!=true)"></div>
    </a>
  </li>
</ul>