Angular ngFor li HTML元素集样式

Question

<ul class="days">
    <liclass="day" *ngFor="let day of currentDays; let i = index"(click)="setStyle()">
        {{day}}
    </li> 
  </ul>

My question is how to add style to exactly specified element in list, when i use ngClass styles are added to all elements? It posible using method add pass reference to element and set style?

Answer 1

You can conditionally set using ngStyle. refer the following code.

<div [ngStyle]="{'background-color':isTrue === true ? 'green' : 'red' }"></<div>

Or refer the stackblitz link for another solution.

enter link description here

Answer 2

You can use

<li [class.your-class]="expression">

For example:

<li [class.mat-elevation-z10]="i === selectedElement">

Or you can use ngClass with expressions

<li [ngClass]="{'first': true, 'second': true, 'third': false}">

Where first , second and third are your classes and true , true , false are the expressions. In the example above, both first and second class would be applied.

Answer 3

You can set different class to each element

<ul class="days">
    <li *ngFor="let day of currentDays; let i = index" [class]="'day'+(index+1)">
        {{day}}
    </li> 
  </ul>

in css set style to each one:

.day1{
...
}

Answer 4

You can use ngClass itself with conditions. You can replace RequiredDay string with variable.

<ul class="days">
    <li [ngClass]="{'desiredClass':day === 'RequiredDay'}" *ngFor="let day of currentDays; let i = index" (click)="setStyle()">
       {{day}}
    </li> 
 </ul>