title: How to dynamically add css class to a certain element?
body: <p>Suppose I have a list of objects and I want to change a certain object styling. I am utilizing <strong>ngClass</strong> and <strong>click</strong> event to toggle CSS class.</p>
  
  <pre><code>&lt;ul class="container"&gt;
    &lt;li class="item" [ngClass]="{'active': isClassVisible }" (click)="isClassVisible = !isClassVisible"&gt;1&lt;/li&gt;
    &lt;li class="item" [ngClass]="{'active': isClassVisible }" (click)="isClassVisible = !isClassVisible;"&gt;2&lt;/li&gt;
    &lt;li class="item" [ngClass]="{'active': isClassVisible }" (click)="isClassVisible = !isClassVisible;"&gt;3&lt;/li&gt;
    &lt;li class="item" [ngClass]="{'active': isClassVisible }" (click)="isClassVisible = !isClassVisible;"&gt;4&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>then in component I have</p>
  
  <pre><code>export class MyComponent {
    isClassVisible: false;
  }
  </code></pre>
  
  <p>and CSS</p>
  
  <pre><code>.active {
    background: black;
  }
  </code></pre>
  
  <p>However with this approach, when I click on an element inside list, the CSS class is applied to all of them, but not the element I clicked.</p>