Getting current state in Angular 2 router

On my long way as an AngularJS developer I’ve learned that when making a complicated application, there always was an ui-router I could rely on. It could meet most of the requirements of any frontend developer.

Let’s imagine that you have a component which behaviour highly depends on the current route. In AngularJS we are using amazing $state with its functionality, while in Angular 2 we have to recreate this tool by ourselves.

E.g., it can as follows below.

In this part of the code we get the list of URL consistent parts:

   let urls: any = this.activatedRoute.pathFromRoot
   .map((el) => {
     return el.url;
   });

Then we should check if the needed part of the URL matches the <routePath>.
As you can see, now in the url variable we have the list of Observables. In order to be able to work easily with this data, we need to use combineLatest.
Once combineLatest transfers the data to map, we will be able to check that the routePath matches one of the URL parts whereafter true/false is returned.

   return Observable.combineLatest(...urls)
   .map(res => {
     let filteredPaths = res.filter((el) => {
       if (!el[0] || !el[0].path) return false;
       return el[0].path == routePath
     });
     return !!filteredPaths.length;
   })

In order to avoid duplicating the code in each of the components, I have performed ng2-router-helper which allows me to use functions is() and includes(), similar to the same functions on ui-router.

You can install ng2-router-helper from NPM and modify the code as shown above:
npm install ng2-router-helper