Using same Selelction Filter on multiple routes with same data but differing selections

Question

We have Selection Filters are on the main screen and we are Displaying this common selection filter comprising of 3 levels viz Country, Cities, Recreations on all routes and selection also needs to be same on all routes. At the initial load it will be select all on all 3 levels. It is good till here but recently we have added a new route which also uses the same selection filter but here we want the first country to be always selected and the cities pertaining to it displayed and so the recreations. But this should not interfere with the selections made on the selection filter on other routes. Also we need to make minimal changes on the Angular 2 HTML. Need to make them in mostly in typescript. Please note the data is same its just the selection that needs to differ on the same data which we are fetching from backend. So we are using the same HTML for all the display. Please guide me on how this can be done. It works with changes in HTML but the code becomes too large and we cannot do that. So need to do it in Typescript components only. We hav separate components for these routes. is it possible to use a method written in the Selection Filter component for the html route click of the new route that I mentioned above which has a separate component of its own?

Answer 1

What about using currentRoute boolean and sending it to the filter

and decide what have to do based on this boolean

component.ts

currentRoute: boolean = false;
ngOnInit() {
  this.currentRoute = /** check for the route**/;
}

component.html

<... | filterSelector:currentRoute>

Answer 2

Added a new parent component for this so now we have 2 parent components and use whichever applies to the current route...Thank you all for your help