title: Set component style from variable in Angular 2
body: <p>My goal is to set a style (height and width in this case) from a component variable using the "styles" attribute. I would think there is a simple data binding method but that may be wishful thinking...</p>
  
  <p>For example if I were using the html mustache binding it might look like this:</p>
  
  <pre><code>@Component({
      selector: '[sidebar]',
      templateUrl: 'app/Nav/sidebar.comp.html',
      styles: [`
          .sidebar-nav {
              overflow: scroll;
              height: {{ height }};
          }
          .sidebar {
              height: {{ 0.9 * height }};
              width: {{ 0.21 * width }};
          }
      `]
  })
  
  export class SidebarComp {
      width: number;
      height: number;
  
      constructor() {
          this.height = window.innerHeight;
          this.width = window.innerWidth;
      }
  }
  </code></pre>
  
  <p>Obviously this is all wrong but I've tried some more likely permutations and had no luck finding solutions on the Angular site, Stack Overflow, or Google. I may be reduced to using ngStyle inline but that's not ideal in this case.</p>