title: How to Create Angular Internal URL Hyperlink?
body: <p>How do I create URL for an internal link?</p>
  <p>Say user in on Customer Component page, and wants to go to Product page.</p>
  <pre><code>http://localhost:4200/app/customer
  </code></pre>
  <p>There is textbox in the Component which states <strong>Product:</strong>
  How can they route to Product Page in Angular Typescript and HTML?</p>
  <pre><code>http://localhost:4200/app/product/{ProductName}
  
  http://localhost:4200/app/product/ComputerKeyboard
  
  http://localhost:4200/app/product/Book
  </code></pre>
  <p>The baseURL may change also, depending on port numbers, environment eg:</p>
  <pre><code>http://www.TestEStore.com/app/product/ComputerKeyboard
  
  http://www.TestEStore.com/app/product/Book
  </code></pre>
  <p>Its also needs to do html encoding, since html encoding eg spaces are encoded as %20, etc</p>
  <p><strong>Trying to edit code :</strong></p>
  <pre><code>let productName: string = 'Computer Keyboard';
  
  &lt;a href=&quot;{{Whats the variable name?}}/product/{{this.productName)}}&quot;&gt;Computer Keyboard&lt;/a&gt;
  </code></pre>
  <p>Is there better option in Angular?</p>
  <p>Resource: <a href="https://stackoverflow.com/questions/36082785/how-to-create-a-link-to-external-url-in-angular-2">How to create a link to external URL in Angular 2</a></p>