In my angular application, there are several icons with a toggle switch on the right side. The default state of the switch is ON. When an icon is clicked, its color changes from white to red. By clicking on the switch, the colored icon reverts back to white, and vice versa. This means that clicking on an icon turns the switch OFF (unchecked) and clicking on the switch changes the colored icon back to its original white color.
Below is the code snippet:
.component.html
<label class="rating-switch" id="toggleSwitch">
<input class="rating-checkbox" type="checkbox" checked >
<div class="slide round" >
</div>
</label> <span class="no-rating-switch" >No Rating</span>
<div class="container">
<span class="iconss"></span><i (click)="selectedIcon = icon.id" class="stl" [ngClass]="icon.class"
[style.color]="selectedIcon === icon.id ? '#FF0000' : '#ffffff'" *ngFor="let icon of iconsArray"></i>
</div>
.component.ts
iconsArray = [
{ id: 1, class: "icon-onlife-smiley-face-1" },
{ id: 2, class: "icon-onlife-smiley-face-2" },
{ id: 3, class: "icon-onlife-smiley-face-3" },
{ id: 4, class: "icon-onlife-smiley-face-4" },
{ id: 5, class: "icon-onlife-smiley-face-5" },
{ id: 6, class: "icon-onlife-smiley-face-6" }
]
selectedIcon = 0;
.component.css
.rating-switch{
position: relative;
width: 48px;
height: 17px;
margin-top: 3em;
}
.switch, .rating-checkbox {
opacity: 0;
width: 0;
height: 0;
}
.slide {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slide:before {
position: absolute;
content: "";
height: 17px;
width: 17px;
left: 1.2px;
bottom: 2px;
top:0.5px;
background-color: #2b547e;
-webkit-transition: .4s;
transition: .4s;
}
.rating-checkbox:checked + .slide {
background-color: #87d3f8;
}
.rating-checkbox:focus + .slide {
box-shadow: 0 0 1px #87d3f8;
}
.rating-checkbox:checked + .slide:before {
-webkit-transform: translateX(29px);
-ms-transform: translateX(29px);
transform: translateX(29px);
}
.slide.round {
border-radius: 34px;
}.slide.round:before {
border-radius: 50%;
}
My goal is to have the switch turn OFF when an icon is clicked, and have the colored icon return to white when the switch is clicked. Any help would be appreciated.
Looking forward to your assistance. Thank you.