title: Implement simple back navigation with angular router
body: <p>I would like to implement a back button inside my header: It will move back from child to parent route!</p>
  <p>Suppose I have the following nested routes: <strong>/ =&gt; /bar =&gt; /bar/foo</strong></p>
  <p>Now if I add a 'Go-Back' button inside my Foo component I can simply do</p>
  <pre><code> this.router.navigate([&quot;..&quot;], { relativeTo: this.activatedRoute });
  </code></pre>
  <p>However, in my case the back-button is in the header (AppComponent) meaning that the above code doesn't work, I guess that ActivatedRoute points to <strong>/</strong></p>
  <p><a href="https://stackblitz.com/edit/angular-router-basic-example-zdxivz?file=app%2Fapp.component.ts" rel="nofollow noreferrer">Stackblitz</a></p>
  <p>So, my question is, how can I navigate back (child to parent) without ActivatedRoute?</p>
  <p>UPDATE: I'm still working on this solution, I have the feeling that it should work (but right now isn't):</p>
  <pre><code> const activatedRoute = this.injector.get(ActivatedRoute);
   this.router.navigate(['..'], { relativeTo: activatedRoute });
  </code></pre>
  <p><a href="https://stackblitz.com/edit/angular-router-basic-example-ptshbv?file=app%2Fapp.component.ts" rel="nofollow noreferrer">Stacblitz</a></p>