list of Mat-Icon when change one all changes Angular 12

Question

enter image description here

import { Component, OnInit,ViewChild, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
import { LoginService } from 'src/app/services/login.service';
import Swal from 'sweetalert2';
import { NgxSpinnerService } from 'ngx-spinner';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import { FormBuilder, FormGroup, NgForm, Validators, FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'app-historique',
  templateUrl: './historique.component.html',
  styleUrls: ['./historique.component.css'],
  encapsulation: ViewEncapsulation.Emulated
})
export class HistoriqueComponent implements OnInit 
{
  // @Input('rating') public rating: number[] = [];
  // @Input('starCount') public starCount: number = 5;
  @Input('color') public color: string = 'accent';
  @Output() public ratingUpdated = new EventEmitter();

  public snackBarDuration: number = 2000;
  public ratingArr : number[] = [];
  Questions: any = [];
  listDeReponses: any[] = [];
  starCount: number = 5;
  rating: number = 0;
  etoile: string='star_border';
  selectedRow :any;
  myForm = new FormGroup({
    bouton: new FormControl('', [Validators.required]),
    // icon: new FormControl('', [Validators.required])
  });

  constructor(private _loginService: LoginService,public spinner: NgxSpinnerService,public dialog: MatDialog,public snackBar: MatSnackBar) { }

  ngOnInit(): void 
  {
    // console.log("a "+this.starCount)
    for (let index = 1; index <= this.starCount; index++) 
    {
      this.ratingArr.push(index);
    }

    var mat = localStorage.getItem('matricule');
    var matricule1 = mat!.replace('"', '');
    var matricule = matricule1.replace('"', '');

    var for1 = localStorage.getItem('formation');
    var form = for1!.replace('"', '');
    var formation = form.replace('"', '');

     this._loginService.GetQuestionsByFormation(matricule,Number(formation)).subscribe(
      data => 
      {
        this.Questions = data;
      });
  }

  onClick(rating:number, quest: number)  //
  {
    this.rating = rating;
    console.log(rating);
    this.snackBar.open('You rated ' + this.rating + ' / ' + this.starCount, '', {
      duration: this.snackBarDuration
    });
    // this.ratingUpdated.emit(this.rating);

    // // this.listDeReponses.push(quest,rating);
    // console.log(this.listDeReponses);

    return false; 
  }

  showIcon(i: number)  //,index:any
  {
    // this.selectedRow =i;
    // console.log(index);
    if (this.rating >= i + 1) {
      return 'star';
    } else {
      return 'star_border';
    }

  }
  

}

export enum StarRatingColor 
{
  primary = "primary",
  accent = "accent",
  warn = "warn"
}

<li *ngFor="let quest of Questions">

  <button mat-icon-button [color]="color" *ngFor="let ratingId of ratingArr;index as i" [id]="'star_'+i" (click)="onClick(i+1,3)" matTooltip="ratingId+1" matTooltipPosition="above"> 
    <mat-icon *ngIf="this.etoile=='star_'+i">
      {{showIcon(i)}}
    </mat-icon>
    </button>
<br>
<br>
    <button mat-icon-button [color]="color" *ngFor="let ratingId of ratingArr;index as i" [id]="'star_'+i" (click)="onClick(i+1,2)" matTooltip="ratingId+1" matTooltipPosition="above"> 
      <mat-icon *ngIf="this.etoile=='star_'+i" >
        {{ showIcon(i) }}
      </mat-icon>
      </button> 
    </li>

I have a list of buttons with mat-icon inside, so when a want to change one of them they change all I expect to change only the button I want to change there is code html and typescript, hope it will help to understand

I have a list of buttons with mat-icon inside, so when a want to change one of them they change all I expect to change only the button I want to change there is code html and typescript, hope it will help to understand