title: Why not to interact with the DOM directly in Angular?
body: <p>I have read that it is not wise to interact with the DOM directly both for security and performance. Avoiding using syntax like below to select Elements.</p>
  
  <pre><code>const itemToManipulate = document.getElementById('example');
  </code></pre>
  
  <p>So I read a good work around is to use ElementRef Directive.
  But go on to find the Angular Documents advise against this because of tight coupling, what is tight coupling?</p>
  
  <p><a href="https://angular.io/api/core/ElementRef" rel="nofollow noreferrer">Found in documentation here</a></p>
  
  <p>I settled for using a ViewChild, like so...</p>
  
  <pre><code>@ViewChild('itemToManipulate') public item: ElementRef&lt;any&gt;; 
  </code></pre>
  
  <p>Does this lead to any unwanted behaviour I should be concerned about (security / performance wise) and is there a best practice for interacting with the DOM, or should this not be done within Angular (6 / 7)?</p>
  
  <p>Thanks in Advance.</p>