title: Angular 2: Detect changes in browser width and update model
body: <p>In my <code>Angular 2</code> app, I change styles based on browser window width.  Here is a sample (SCSS):</p>
  
  <pre><code>.content{
      /*styles for narrow screens*/
      @media (max-width: 750px){
          background-color:beige;
      }
      /*styles for medium screens*/
      @media (min-width: 751px) and (max-width: 1200px) {
          background-color:red;
      }
      /*styles for wide screens*/
      @media (min-width: 1201px) {
          background-color:brown;
      }   
  }
  </code></pre>
  
  <p>This makes my UI responsive. I'd like my Angular components to know which width interval is current:</p>
  
  <pre><code>/* Returns which of the CSS width intervals is current*/
  getWidthRange(){
      let pixelWidth = ...; //what goes here?
  
      if(pixelWidth &lt; 251) return "small";
      if(pixelWidth &lt; 451) return "medium";
      return "large"; 
  }   
  </code></pre>
  
  <p>A component would call this function and adjust its behavior based on width. For instance, the template below will show more content on wider screens:</p>
  
  <pre><code>&lt;div&gt;
      {{getWidthRange()==='small'? shortText : longText}}
  &lt;/div&gt;
  </code></pre>
  
  <p>Even better, I would setup an Observable that emits when the browser transitions from one range to the next:</p>
  
  <pre><code>widthRangeChanges = Observable.create( observer =&gt; 
      {       
          // ? how to detect when width changes
          let oldRange = '...';
          let newRange = '...';
          if(newRange!==oldRange) observer.next(newRange);
      }
  ).share(); //all subscribers share same output channel
  </code></pre>
  
  <p>The component could then subscribe to <code>widthRangeChanges</code> and update model values when a new range is received. How can I get hold of this info in <code>Angular 2</code>?</p>
  
  <p><code>Angular 2 rc-6</code>, <code>typescript 2.0.2</code>, <code>rxjs 5 beta 11</code></p>