<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?
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.
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.
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{
...
}
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.