title: Conditional class in *NgFor with angular
body: <p>I have this html code:</p>
  
  <pre><code> &lt;div class="chip-idiomas"&gt;
      &lt;mat-chip-list multiple [selectable]="true"&gt;
        &lt;mat-chip *ngFor="let idioma of idiomas"
                  class="chip"
                  [ngClass]="{'chip-selecionado' : isClassVisible}"
                  [selected]="idioma"
                  (click)="isClassVisible = !isClassVisible;changeSelected('s', idioma)"&gt;
          {{ idioma.nome }}
        &lt;/mat-chip&gt;
      &lt;/mat-chip-list&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>When I click on the chip, the class change in all , not just in the chip clicked. I'm using Angular 5. </p>
  
  <p>I wish just the clicked element changed the css</p>
  
  <p>See this pic before and after</p>
  
  <p><strong>before</strong>:
  <a href="https://i.stack.imgur.com/Godwb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Godwb.png" alt="enter image description here"></a></p>
  
  <p><strong>after</strong>:
  <a href="https://i.stack.imgur.com/ggrOC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ggrOC.png" alt="enter image description here"></a></p>
  
  <p>can Someone help? </p>