When working with Angular, I have the need to call certain functions that will return a value based on the current page routing. These functions are currently located within the element that needs to be changed by the route's component.
I know how to code these functions, but I have a couple of questions: 1. Do I need to create a service like "ColorService" to handle these functions? 2. Should I call these functions from the components of the elements I want to change based on routing, or from the routing module itself?
Here is an example of my current routing module:
import { NgModule } from '@angular/core';
import { HomeHebComponent } from '../components/home-heb/home-heb.component';
... (more components imported)
export class RoutingModule { }
Below is an example of a function for changing colors in the menu file:
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
})
export class MenuComponent implements OnInit {
private route: string;
constructor(private router: Router) {
router.events.subscribe( val => {
this.route = window.location.pathname;
console.log(this.route);
});
}
ngOnInit() {}
// Toggle color based on routing
private toggleColorAboutRouting(): string {
return this.route === '/heb/about' ? 'white' : 'initial';
}
}