title: How to update browser url when a property changes on a component?
body: <p>If I browse to <code>http:\\localhost:4300\fr</code>, my home page gets loaded with a french translation.</p>
  
  <p>I have 2 links in my navigation (Home, Contact Us).</p>
  
  <p>Home points to <code>http:\\localhost:4300\fr\home</code>
  Contact Us points to <code>http:\\localhost:4300\fr\contact</code></p>
  
  <p>I also have a dropdown which in which the user can select a language and it will return the translated page.</p>
  
  <p>For example, when I select Spanish, the links update to:</p>
  
  <p><code>http:\\localhost:4300\es\home</code> and <code>http:\\localhost:4300\es\contact</code>, but the browser url remains <code>http:\\localhost:4300\fr</code>.</p>
  
  <p>How can I update the browser url?</p>
  
  <p>Here is the code I am using when the user picks a language from the dropdown:</p>
  
  <pre><code>  translate(langCode, language) {
      const hostName = document.location.hostname.replace('www.', '');
  
      this.currentTrans = language;
      this.currentTransCode = langCode;
      this._caseService.GetCaseData(caseUrl,  langCode);
    }
  </code></pre>
  
  <p><code>this.currentTransCode</code> holds the current language code</p>
  
  <p>The url is contructed like this <code>http:\\localhost:4300\</code> + <code>this.currentTransCode</code></p>