How to Switch off and ON the toggle Button based on the click event on icon

In my angular application I have some font icons and also I have one toggle switch ,by default the toggle switch is in ON state.

And My requirement is when I click on any of the icon(the color of the icon should changed from white to red and this was done).the toggle switch should turned to OFF state and when we click on the toggle switch the colored icon should changed to white from red.

.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 icons"></i>
</div>

.component.css

icons = [
    { id: 1, class: "icon-1" },
    { id: 2, class: "icon-2" },
    { id: 3, class: "icon-3" },
    { id: 4, class: "icon-4" },
    { id: 5, class: "icon-5" },
    { id: 6, class: "icon-6" },
    { id: 7, class: "icon-7" },
   
];

So as mentioned above I have to switch off the toggle button (means unchecked)when I click on the icon and when I click on the switch the colored icon should changed to white.

I have tried with multiple ways can anyone help me on this.

Answer

I think its a bad idea to toggle multiple icons with one switch (and be able to toggle them manually on a click), it confuses me. But nevermind, here you go.

First you need to declare a state of each of your icons, so you know which one is active/inactive (if there is any logic behind this, you want to know).

Every time you click on an icon which state changes to active, it becomes red. When you click on the toggle, and its state changes to inactive, all of your icons will change back to white.

component.html:

 <label class="rating-switch" id="toggleSwitch">
    <input class="rating-checkbox" type="checkbox" [checked]="toggleState" (change)="onToggleClicked($event)">
    <div class="slide round">

    </div>
  </label> <span class="no-rating-switch">No Rating</span>

  <div class="container">
    <span class="iconss"></span>
    <i (click)="onIconClick(icon)" class="stl" [class]="icon- + i"
       [style.color]="icon.active === true ? '#FF0000' : '#ffffff'" *ngFor="let icon of icons; let i = index">
    </i>
  </div>

component.ts:

  toggleState = true;
  icons = [
    {id: 1, class: 'icon-1', active: false},
    {id: 2, class: 'icon-2', active: false},
    {id: 3, class: 'icon-3', active: false},
    {id: 4, class: 'icon-4', active: false},
    {id: 5, class: 'icon-5', active: false},
    {id: 6, class: 'icon-6', active: false},
    {id: 7, class: 'icon-7', active: false},
  ];

  ngOnInit() {
    
  }

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

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

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

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