Angular / Typescript - изменение цвета фона диапазона при нажатии ссылки

Question

Я пытаюсь изменить цвет диапазона при щелчке по ссылке, чтобы указать, что он отмечен. Это должно работать в виде переключателя, что означает, что цвет должен исчезнуть, если щелкнуть (проверить) другую ссылку. Я пробовал различные методы, используя только html и css, но, к сожалению, мне так и не удалось заставить его работать с помощью: focus. На данный момент, когда я нажимаю на один из фильтров, нет никаких признаков того, что одна из категорий была активирована, что сильно влияет на UX. Я считаю, что этого можно достичь с помощью ngClass в angular, однако мне очень трудно понять, как это работает. Любая помощь будет принята с благодарностью.

HTML:

<div class="checklist categories">
    <ul>
        <li><a data-action="filter-link" (click)="changeCategory(null)"><span></span>All</a></li>
        <li><a data-action="filter-link" (click)="changeCategory('House Favourites')"><span></span>House Favourites</a></li>
      </ul>
  </div>   

Стиль диапазона образует небольшой флажок.

Answer 1

u может использовать ngClass Demo

в css создать свой класс и написать, какой css вы хотите

.active-link span{background-color:green;}

в html создать ngClass для каждого элемента списка

 <ul>
        <li><a data-action="filter-link" [ngClass]="{'active-link' : menus.allMenu}"  (click)="changeCategory(null,'allMenu')"><span></span>All</a></li>
        <li><a data-action="filter-link" [ngClass]="{'active-link' : menus.houseMenu}" (click)="changeCategory('House Favourites','houseMenu')"><span></span>House Favourites</a></li>
 </ul>

затем в ts создайте модель для меню

menus={allMenu:false,houseMenu:false}

с функцией сначала инициализируйте его, затем измените, щелкнув один

changeCategory(el,event){
    this.menus.allMenu=false;
    this.menus.houseMenu=false;
    this.menus[event]=!this.menus[event];
  }