title: CSS style base on route - Angular2
body: <p>On the home page I want my logo to be 3x as big. Then when you select a menu option and the router opens a different page it should shrink down to normal size again.</p>
  
  <p>I was trying to do it by setting a variable to the page name and having the CSS change based on that.</p>
  
  <pre><code>&lt;li [class.homeLogo]="home === 'Home'"&gt;
  </code></pre>
  
  <p>The problem is if someone types the route into the browser URL instead of clicking on the menu button it throws the whole thing off. It also resets if the page is refreshed.</p>
  
  <p>Is there a way to access what route is currently being displayed so that I can ensure the CSS is tied to the page and not a variable?</p>