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:

```
<nav class="navigation" [class.navigation--overlay]="isItOpen">
</nav>

```

Essentially I would like my class `.navigation--overlay` to be set to the height of the window `(window.innerHeight)`

Can I essentially set a variable on my component:

```
@Component({
  selector: 'poodles',
  templateUrl: 'app/doodles.html',
  styles: [`
    .navigation--overlay {
      background: $MyColor;
    }
  `]
  providers: [DuhService]
})

```