title: What is the best way to listen for component resize events within an Angular2 component?
body: <p>I'm writing an Angular2 component that needs to dynamically change its content when resized. I am using the experimental Renderer in @angular/core (v2.1.0) and can wire up a click listener with the following:</p>
  
  <pre><code>this.rollupListener = this.renderer.listen(this.rollUp, 'click', (event) =&gt; {
    ...
  });
  </code></pre>
  
  <p>But unfortunately I cannot do the same for a resize event - both 'resize' or 'onresize' do not work:</p>
  
  <pre><code>this.resizeListener = this.renderer.listen(this.container, 'resize', (event) =&gt; {
    // this never fires :(
  });
  </code></pre>
  
  <p>I am able to pick up on browser resize events using the following:</p>
  
  <pre><code>@HostListener('window:resize', ['$event.target'])
  onResize() {
    ...
  }
  </code></pre>
  
  <p>But unfortunately not all component resizing in my application is due to a browser resize.</p>
  
  <p>Basically, I'm looking for the JQuery equivalent of:</p>
  
  <pre><code>$(this.container).resize(() =&gt; {
    ...
  });
  </code></pre>