title: Using dynamic value in css in Angular 2
body: <p>How would i go about updating the CSS dynamically of an overlay that I have appear only when clicked on.
  Here is a portion of my html:</p>
  
  <pre><code>&lt;nav class="navigation" [class.navigation--overlay]="isItOpen"&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Essentially I would like my class <code>.navigation--overlay</code> to be set to the height of the window <code>(window.innerHeight)</code></p>
  
  <p>Can I essentially set a variable on my component:</p>
  
  <pre><code>@Component({
    selector: 'poodles',
    templateUrl: 'app/doodles.html',
    styles: [`
      .navigation--overlay {
        background: $MyColor;
      }
    `]
    providers: [DuhService]
  })
  </code></pre>