I have a ngFor where it gets the static data from the .ts file, I’m trying to add active class on the selected item, the issue is as it is in ngfor it toggles class on every item on the list. How can I add active class to the selected item?

    <div
        class="mb-2 item rounded bg-white border"
        *ngFor="let item of keys(); let i = index"
        (click)="ItemSelectClick(item)"
        [ngClass]="ItemSelectStatus ? 'active' : ''">
        <a href="javascript:void(0)" class="cursor-pointer">
          <figure>
            <div class="p-5">
              <img
                src="{{ item[1].image }}"
                class="rounded-t mx-auto mb-4"
                width="75"
              />
              <figcaption>
                <p class="text-lg mb-3 font-semibold leading-relaxed">
                  {{ item[1].name }}
                </p>

                <div class="flex justify-between">
                  <span class="leading-5 font-semibold">
                    {{ item[1].calories }} Cal.
                  </span>
                  <span class="leading-5 font-semibold">
                    ${{ item[1].price }}
                  </span>
                </div>
              </figcaption>
            </div>
          </figure>
        </a>
      </div>

import { Component, inject, OnInit, ViewChild } from "@angular/core";
import { CartItemService } from "src/app/shared/services/cart-item.service";
import { ToastService } from "src/app/shared/services/helpers/toaster.service";

@Component({
  selector: "wrap-menu",
  templateUrl: "./wrap-menu.component.html",
  styleUrls: ["./wrap-menu.component.scss"],
})
export class wrapComponent implements OnInit {
  toastService = inject(ToastService);

  isSelected = false;
  selectedItem: any;
  showToaster: boolean = false;
  toasterMessage: string = "";

  chickenMenuItem = [
    {
      id : 1,
      name: "Shawarma",
      image: "../../../assets/images/kebab.png",
      calories: "34",
      price: "23",
    },
    {
      id : 2,
      name: "American Roll",
      image: "../../../assets/images/wrap2.png",
      calories: "23",
      price: "24",
    },
    {
      id : 3,
      name: "Mexican Kebab",
      image: "../../../assets/images/item.png",
      calories: "34",
      price: "75",
    },
    {
      id : 5,
      name: "Kebab",
      image: "../../../assets/images/wrap1.png",
      calories: "53",
      price: "35",
    },
    {
      id : 6,
      name: "Spicy Fries",
      image: "../../../assets/images/kebab.png",
      calories: "22",
      price: "23",
    },
    {
      id : 7,
      name: "Turkish Kebab",
      image: "../../../assets/images/item.png",
      calories: "35",
      price: "45",
    },
    {
      id : 8,
      name: "Chicken Noodels",
      image: "../../../assets/images/item.png",
      calories: "23",
      price: "45",
    },
    {
      id : 9,
      name: "Crispy Wings",
      image: "../../../assets/images/kebab.png",
      calories: "34",
      price: "98",
    },
  ];

  constructor(private cartItemServices: CartItemService) {}

  ItemSelectStatus: boolean = false;

  ItemSelectClick(item: any) {
    this.isSelected = true;
    this.ItemSelectStatus = !this.ItemSelectStatus;
    this.selectedItem = item;
    
  }

  ngOnInit(): void {

  }

  addItem() {
    this.cartItemServices.addItem(this.selectedItem);
    this.showToast("Item Added Successfully");
  }

  showToast(message: string): void {
    this.toasterMessage = message;
    this.showToaster = true;
    setTimeout(() => this.hideToaster(), 3000);
  }

  hideToaster(): void {
    this.showToaster = false;
    this.toasterMessage = "";
  }

  keys(): Array<any> {
    console.log(Object.entries(this.chickenMenuItem));
    return Object.entries(this.chickenMenuItem);
  }

  onCancel() {
    this.isSelected = false;
  }

  selectedIndex: number = null;



}