I'm currently facing an issue in Angular2 where I am trying to apply different styles using ngClass within an 'NgFor' loop, but for some reason, it's not working as expected.
Apologies for any language errors.
<div class='line'></div>
<clr-icon *ngFor="let step of steps; let i = index" shape="circle"
class='circle' attr.ng-class="circle{{ i + 1 }}"
size="36">
</clr-icon>
<clr-icon *ngIf="steps.length == 1" attr.ng-class="circle{{ 2 }}" shape="circle" class='circle' size="36"></clr-icon>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.mycontainer {
position: relative;
width: 100%;
display: block;
}
.step {
position: absolute;
left: 0%;
width: 100%;
.circle {
color: black;
margin-top: -30px;
background-color: white;
}
.circle1 {
position: absolute;
left: 0%;
}
.circle2 {
position: absolute;
right: 0%;
background-color: black;
color: yellow;
/*@calcularposicion();*/
}
}
.line {
height: 5px;
width: 100%;
background-color: green;
}
Even though the second circle should appear with a 'yellow' color, it is not displaying anything. Upon inspecting the HTML, I can see that the classes 'circle' and 'circle2' are present.