title: Observable: How to get the changed path?
body: <p>I am building the Breadcrumb(Home > Calendar) for my project. I want the Breadcrumb to be updated depending on the component I am in:</p>
  
  <p>Home > Calendar</p>
  
  <p>Home > Visit Us</p>
  
  <p>For this I need the current path (which I have) and I need to use 'Observables' to get the changed path.</p>
  
  <p><strong>Q1) I need to use 'Observables' to get the changed path?</strong></p>
  
  <p>...this is where I am stuck!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute , UrlSegment} from '@angular/router';
  
  @Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css']
  })
  export class HeaderComponent implements OnInit {
   r:string;
    constructor(private route: ActivatedRoute) { }
  
    ngOnInit() {
     // Got the current route, WORKS!
     this.r = this.route.url;
     // But, how do I use observables to get the changed path if user goes to a different page
     this.route.url.subscribe((url: string)=&gt;{
      this.r = url;
     })
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
   &lt;div class="row"&gt;
    &lt;div class="col-sm-8"&gt;
     &lt;h1&gt;musem&lt;/h1&gt;
     &lt;h6&gt;ONTARIO&lt;/h6&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-2"&gt;
     &lt;button class="btn btn-lg"&gt;
      &lt;i class="fas fa-envelope"&gt;&lt;/i&gt; Edit
     &lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-2"&gt;
     &lt;button class="btn btn-lg"&gt;
      &lt;i class="fas fa-map"&gt;&lt;/i&gt; Find
     &lt;/button&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;nav aria-label="breadcrumb"&gt;
    &lt;ol class="breadcrumb bg-transparent"&gt;
        &lt;li class="breadcrumb-item"&gt;&lt;i class="fas fa-home"&gt;&lt;/i&gt;&lt;/li&gt;
        &lt;li class="breadcrumb-item active" aria-current="page"&gt;{{r}}&lt;/li&gt;
      &lt;/ol&gt;
   &lt;/nav&gt;
   &lt;hr&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>