title: Dynamically change header string in angular 2
body: <p>In my app Im trying to dynamically change the title in my header component depending on the page that Im on, so In my header component I want to use a </p>
  
  <pre><code>&lt;h1&gt;{{title}}&lt;/h1&gt;
  </code></pre>
  
  <p>and I want it to change depending on the page that I am on. Now the header is fixed so it's on every page</p>
  
  <p>below is an image of what im trying to change <a href="https://i.stack.imgur.com/bY86l.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bY86l.png" alt="enter image description here"></a></p>
  
  <p>Basically if im on the home page I want it to say home and then if Im on an about page I want it to change to about..</p>
  
  <p>Not sure how I can go about this and everything ive researched has been to change the title in the <code>&lt;head&gt;&lt;/head&gt;</code> tags </p>