Where does DOM manipulation belong in Angular 2?
<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>