Subscribe to child route changes, Know in parent what child route segment is selected?

Question

Angular v2.2.1, Router v3.2.1

I have a nested router with children, the router link looks like this:

/todo/iwgv4ehyav544f7c/zone1 (zone1 is the child route of todo/:id)

/todo/iwgv4ehyav544f7c/zone2 (zone2 is the child route of todo/:id)

Now keep in mind that todo/:id page has it's own router-outlet that displays the children.

In the parent (todo/:id) I have I have 2 buttons, Button1 and Button2.

I want to display Button1 when child route zone1 is active and Button2 when zone2 is active.

I have managed to make something but I don't think it is the correct way:

   router.events
     .filter(event => event instanceof NavigationEnd)
     .map(value => value.url.split("/")) // what I get: ["","todo","iwgv4ehyav544f7c","zone1"]
     .map(value => value[3]) // selecting the value at id 3 which is the child param
     .subscribe(response => {
       this.activatedChildUrl = response;  // end value is "zone1"
     })

Is there another better way to subscribe to the router and get the child params, so I can use this value in the parent?

Edit:

Other things I have tried so far that did not work from Victor Savkin book:

activatedRoute.url.subscribe(() =>{
  activatedRoute.snapshot.firstChild.url[0].path

}); // is firing only once 

Answer 1

I like this more:

HTML: *ngIf="router.url.includes('childroute')"