Issue
At the moment it changes the background color of the slider component. How can I assign the dynamic color to other objects like the border of an image?
where I want the dynamic colors
<ion-thumbnail slot="start">
<ion-img [src]="item.src"></ion-img>
</ion-thumbnail>
The color of that border should change depending on the value in ion-range
ion-thumbnail{
border: 2px solid #ffffff;
}
current working code
<ion-range [(ngModel)]="value" color="white" [style.background]="getSliderBgColor(value)">
Solution
Hi you can change the color of your border dynamically in different ways, this works perfectly.
<ion-thumbnail slot="start" [style.border-color]="condition ? '#fff' : '#040404'">
<ion-img [src]="item.src"></ion-img>
</ion-thumbnail>
You may also choose to have different css classes for the various colors like this:
.white {
border-color: #fff !important
}
.blue {
border-color: blue !important
}
.black {
border-color: #000000 !important
}
then in your code you can write this
<ion-thumbnail slot="start" [ngClass]="{'white' :
condition === true, 'blue': bluecondition === true, 'black': blackcondition === true}">
<ion-img [src]="item.src"></ion-img>
</ion-thumbnail>
in this case one should be true in order not to complicate thing, but feel free to move around it. You could also do this
<ion-thumbnail slot="start" [ngClass]="condition? 'white' : 'blue'">
<ion-img [src]="item.src"></ion-img>
</ion-thumbnail>
Answered By - Okere Chukwudi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.