Как сделать клики по пунктам меню независимыми?

Чтобы сделать клики по пунктам меню независимыми в Angular, нужно использовать директиву ngClass и обрабатывать клики с помощью методов в компоненте.

1. В шаблоне меню определите пункты меню в виде списка. Например:

<ul>
  <li [ngClass]="{ active: isActive === 'item1' }" (click)="handleItemClick('item1')">Пункт меню 1</li>
  <li [ngClass]="{ active: isActive === 'item2' }" (click)="handleItemClick('item2')">Пункт меню 2</li>
  <li [ngClass]="{ active: isActive === 'item3' }" (click)="handleItemClick('item3')">Пункт меню 3</li>
</ul>

2. В компоненте определите переменную isActive и метод handleItemClick, который будет обрабатывать клик по пункту меню и обновлять значение isActive. Например:

import { Component } from '@angular/core';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent {
  isActive: string | undefined;

  handleItemClick(item: string): void {
    this.isActive = item;
  }
}

3. Определите стили для активного пункта меню в CSS, используя класс active. Например:

li.active {
  background-color: blue;
  color: white;
}

Теперь каждый пункт меню будет иметь состояние isActive, которое будет обновляться при клике. При этом активный пункт меню будет иметь соответствующий класс active, что позволит применять к нему стили.