Add style to specific element angular 6

Question

I have the following block of code in the front-end:

<li *ngFor = "let cat of this.dataCategory.iconTitleSet" (click)="getTypeFromCategory(cat.title)" class="list-group-item puntero">
    <img [src]="cat.icon"  alt="icon" title="icon" />{{cat.title}}
</li>

in the component:

getTypeFromCategory(tipo: string) {
    this.typeItem = tipo.toLowerCase();

    if (this.arrayTipo.includes(this.typeItem)) {
      const i = this.arrayTipo.indexOf( this.typeItem );
      this.arrayTipo.splice( i, 1 );
    } else {
      this.arrayTipo.push(this.typeItem);
    }
}

in synthesis what up to now does is add a value that I get from FRONTEND in an array in case it is not, and if it eliminates it from the array, but when I add it I also want to put a specific style, for example a yellow background, but this last I do not know how to do it, I do not know how to say to angular that I put a specific style in element "li" specific generated by an "ngfor" loop when I click on the element.

this is the image in the frontend

Answer 1

You can do the following.

HTML

<li *ngFor = "let cat of this.dataCategory.iconTitleSet; let i = index" (click)="getTypeFromCategory(cat.title, index)" class="list-group-item puntero" [class.changeColor]="i == selectedValue">
<img [src]="cat.icon"  alt="icon" title="icon" />{{cat.title}}

Component

selectedValue: any;
getTypeFromCategory(tipo: string, index) {
     this.selectedValue = index;
    this.typeItem = tipo.toLowerCase();

    if (this.arrayTipo.includes(this.typeItem)) {
      const i = this.arrayTipo.indexOf( this.typeItem );
      this.arrayTipo.splice( i, 1 );
    } else {
      this.arrayTipo.push(this.typeItem);
    }
}

class changeColor will be applied to every list item selected.

Answer 2

You can do it in some ways:

1. to set a diffrennt class with [ngClass]="" to each li and style in css

for example:

<li *ngFor = "let cat of this.dataCategory.iconTitleSet;let i=index;" [ngClass]="'title_'+i" (click)="getTypeFromCategory(cat.title)" class="list-group-item puntero">
    <img [src]="cat.icon"  alt="icon" title="icon" />{{cat.title}}
</li>

in css :

.title_1{}

2. you can set it with [ngStyle] or style.

<li *ngFor = "let cat of this.dataCategory.iconTitleSet;let i=index;" [style.color]="cat.color" (click)="getTypeFromCategory(cat.title)" class="list-group-item puntero">
    <img [src]="cat.icon"  alt="icon" title="icon" />{{cat.title}}
</li>