sidenav-angular/src/app/sidenav/sidenav.service.ts

import { Injectable } from "@angular/core";
import { Router } from "@angular/router";
import { Observable } from "rxjs";
import { map, filter } from "rxjs/operators";

@Injectable()
export class SidenavService {
	selectedElement;
	currentRouteChange: Observable<string>;
	currentRoute: string;

	constructor(
		private _router: Router
	){
		this.currentRoute = this._router.routerState.snapshot.url;
		this.currentRouteChange = this._router.events.pipe(
			filter((status : any) => status.urlAfterRedirects !== undefined && status.state === undefined),
			map((status : any) => {
				this.currentRoute = status.urlAfterRedirects;
				return status.urlAfterRedirects;
			})
		)
	}

	clickItem(event: any, route: string) {
		if(this.selectedElement !== event.target.parentElement.parentElement && event.target.parentElement.parentElement.tagName === 'LI') 
			this.setSelectedItem(event.target.parentElement.parentElement)
	}

	setSelectedItem(element: Element) {
		if(this.selectedElement) this.selectedElement.classList.remove('active-item')
		this.selectedElement = element;
		this.selectedElement.classList.add('active-item')
	}
}