How to change the font-weight based on the toggle switch on and off condition-CodePudding

I have an angular application, in that I have one toggle switch on right side I have some text and by default toggle button is in ON state and the text is in bold.

And my requirement is when the toggle switch is in OFF state the text should be in normal font weight(not Bold).

.component.html

<div  >
            <label  id="toggleSwitch">
              <input  type="checkbox" [checked]="toggleState" (change)="onToggleClicked($event)" >
              <div  >
          </div>
            </label>
            <span  >No Rating</span>
         </div>

 <div >

      
 <ul>
   <li *ngFor="let icon of Arr">
    <span  [style.font-weight]="icon.active ? 'bold' : 'normal'" ></span><i (click)="onIconClick(icon)"    [ngClass]="icon.class"
    [style.color]="icon.active === true ? '#ffff00' : '#ffffff'" >
   
 </i>
   </li>
 </ul>
      </div>

In the above code the toggle is in on state when we click on any of the icon the toggle will be off(done in the code), in this my requirement is when the toggle is in OFF state the text font -weight should turned from bold to lighter.

.component.ts

toggleState = true;

 onIconClick(icon: any) {
    let iconToEdit = this.iconsArr.find(ico => ico.id === icon.id);
    if (iconToEdit && !iconToEdit.active) {
      this.iconsArr.forEach(i => i.active = false);
      iconToEdit.active = !iconToEdit.active;
      this.markToggleAsActive();
    } else {
      this.iconsArr.forEach(i => i.active = false);
    }
  }

  onToggleClicked(event: any) {
    this.toggleState = event.target.checked;
    this.markIconsAsInactive();
  }

  markIconsAsInactive() {
    if (this.toggleState) {
      this.iconsArr.forEach(icon => icon.active = false);
    }
  }

  markToggleAsActive() {
    this.toggleState = !this.iconsArr.find(icon => icon.active);
  }

.component.css

 .no-rating-switch{
     font-size: 1.1em;
     margin-left: 0.5em;
font-weight:bold

Can anyone help me on the same }

CodePudding user response：

Add this property to your span

[style.font-weight]="toggleState ? 'bold' : 'normal'"

And remove this line from your css

font-weight:bold

CodePudding user response：

Add this when on your .ts file when your switch is on:

switchFuntion{
if SwitchIsOn(){
this.switch = 'bold';
document.documentElement.style.setProperty("--font-weight", this.font-weight)
}
else{
this.switch = 'normal';
document.documentElement.style.setProperty("--font-weight", this.font-weight)
}
}

and on your .css file,

 .no-rating-switch{
     font-size: 1.1em;
     margin-left: 0.5em;
font-weight: var(--font-weight);