Conditional class in *NgFor with angular

Question

I have this html code:

 <div class="chip-idiomas">
    <mat-chip-list multiple [selectable]="true">
      <mat-chip *ngFor="let idioma of idiomas"
                class="chip"
                [ngClass]="{'chip-selecionado' : isClassVisible}"
                [selected]="idioma"
                (click)="isClassVisible = !isClassVisible;changeSelected('s', idioma)">
        {{ idioma.nome }}
      </mat-chip>
    </mat-chip-list>
  </div>

When I click on the chip, the class change in all , not just in the chip clicked. I'm using Angular 5.

I wish just the clicked element changed the css

See this pic before and after

before :

after :

can Someone help?

Answer 1

I would suggest you to store index in isClassVisible and rename it to something like visibleClassIndex , and check in [ngClass] if current class is visible by checking current index with visibleClassIndex , since there will be 0 index, which is false value, I would suggest you to define visibleClassIndex type as null | number null | number or undefined | number undefined | number and do check like so visibleClassIndex !== null && visibleClassIndex === i or visibleClassIndex !== undefined && visibleClassIndex === i , if you will choose null make sure to assign null as default value visibleClassIndex: null | number = null; visibleClassIndex: null | number = null; , I would suggest to use undefined , because with it you don't need to define default type, since it automatically will be undefined

 <div class="chip-idiomas">
    <mat-chip-list multiple [selectable]="true">
      <mat-chip *ngFor="let idioma of idiomas"
                class="chip"
                [ngClass]="{'chip-selecionado' : visibleClassIndex !== undefined && visibleClassIndex === i}"
                [selected]="idioma"
                (click)="visibleClassIndex = i;changeSelected('s', idioma)">
        {{ idioma.nome }}
      </mat-chip>
    </mat-chip-list>
  </div>

Answer 2

Solution:-

Stackblitz Link:- https://stackblitz.com/edit/angular-material-jyzotv?file=app%2Fapp.component.html

 <div class="chip-idiomas">
    <mat-chip-list multiple [selectable]="true">
      <mat-chip *ngFor="let idioma of idiomas;let isFirst = first"
                  [selected]="tab === idioma"
                  class="chip"
                 [class.active]="tab === idioma"
               (click)="activateClass(idioma)">
        {{ idioma }}
      </mat-chip>
    </mat-chip-list>
  </div>

  <div class="chip-idiomas">
    <mat-chip-list multiple [selectable]="true">
      <mat-chip *ngFor="let idioma of idiomas;let isFirst = first"
                  class="chip"
                 [class.active]="tab === idioma"
               (click)="activateClass(idioma)">
        {{ idioma }}
      </mat-chip>
    </mat-chip-list>
  </div>

--

export class AppComponent  {
  idiomas = ['A','B','C']
  tab = this.idiomas[0];

  activateClass(subModule){
  this.tab = subModule;    
}
}