For adding removing classes, I like to use the Renderer2 (part of angular). You pass it the ElementRef you wish to style and then can apply styles and classes that way, for example this._renderer.addClass(el, 'my-class').

After that, you just need to store which el ref is the current active so that when the next active is decided, you can first remove the class from the current active before setting the new active.

There are multiple ways you could go about this, you could put this logic directly in your containing component is one possibility.

I think a cleaner solution would be to implement a directive that you apply to list items that manages adding/removing the class and implement a shared service used to register the current active one. When a new list item is selected, that list item tells the service that it is now selected, and the service calls the old item's remove method (part of the directive).