title: Where does DOM manipulation belong in Angular 2?
body: <p>In Angular 1 all DOM manipulation should be done in directives to ensure proper testability, but what about Angular 2? How has this changed?</p>
  
  <p>I've been searching for good articles or any information at all about where to put DOM manipulation and how to think when doing it, but I come up empty every time. </p>
  
  <p>Take this component for example (this is really a directive but let's pretend that it's not):</p>
  
  <pre><code>export class MyComponent {
  
    constructor(private _elementRef: ElementRef) {
  
      this.setHeight();
  
      window.addEventListener('resize', (e) =&gt; {
        this.setHeight();
      });
    }
  
    setHeight() {
      this._elementRef.nativeElement.style.height = this.getHeight() + 'px';
    }
  
    getHeight() {
      return window.innerHeight;
    }
  }
  </code></pre>
  
  <p>Does event binding belong in a constructor for example, or should this be put in the <code>ngAfterViewInit</code> function or somewhere else? Should you try to break out the DOM manipulation of a component into a directive? </p>
  
  <p>It's all just a blur at the moment so I'm not sure that I'm going about it correctly and I'm sure I'm not the only one.</p>
  
  <p>What are the rules for DOM manipulation in Angular2? </p>