Angular/typescript - Change Background Color Of A Span When A Link Is Clicked

I'm trying to change the color of a span when a link is clicked in order to indicate that it's checked. This must work in the form of a radio button, meaning that the color must di

Solution 1:

u can use ngClass Demo

in css create your class and write which css you want

.active-linkspan{background-color:green;}

in html create ngClass for each list item

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

then in ts create model for menus

menus={allMenu:false,houseMenu:false}

with function first initialize it then change clicked one

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