title: Using JavaScript with Angular Component: Cannot read property 'id' of null
body: <p>I have successfully managed to connect my external <code>JavaScript</code> file to my <code>angular</code> component, however it doesn't work in some instances.</p>
  
  <p>I connected my <code>src/custom.js</code> file to my <code>app.component.html</code> through <code>angular.json</code>, as illustrated below: </p>
  
  <pre class="lang-js prettyprint-override"><code>"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.css",
    "src/styles.css"
  ],
  
  "scripts": [
     "node_modules/jquery/dist/jquery.js",
     "node_modules/bootstrap/dist/js/bootstrap.js",
     "src/custom.js"
  ]
  </code></pre>
  
  <p><em>Context:</em><br/>
  The demo script is a simple alert saying hello that pops every time I connect to my localhost. <br/>As far as I'm aware there's no issue with the external <code>js</code> file being referenced.</p>
  
  <p>My issue seems to come from more complex functions.<br/>
  <a href="https://www.w3schools.com/howto/howto_js_draggable.asp" rel="nofollow noreferrer">Here's the example that am trying to implement</a> from w3schools.</p>
  
  <p>And it's set up as follows:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!-- app.component.html --&gt;
  
  &lt;div id="mydiv"&gt;
    &lt;div id="mydivheader"&gt;Click here to move&lt;/div&gt;
    &lt;p&gt;Move&lt;/p&gt;
    &lt;p&gt;this&lt;/p&gt;
    &lt;p&gt;DIV&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>// custom.js 
  
  dragElement(document.getElementById("mydiv"));
  
  function dragElement(elmnt) {
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    if (document.getElementById(elmnt.id + "header")) {
       document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
    } else {
       elmnt.onmousedown = dragMouseDown;
    }
  
    function dragMouseDown(e) {
      e = e || window.event;
      e.preventDefault();
      pos3 = e.clientX; pos4 = e.clientY;
      document.onmouseup = closeDragElement;
      document.onmousemove = elementDrag;
    }
  
    function elementDrag(e) {
      e = e || window.event;
      e.preventDefault();
      pos1 = pos3 - e.clientX; 
      pos2 = pos4 - e.clientY;
      pos3 = e.clientX; 
      pos4 = e.clientY;
      elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
      elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
    }
  
    function closeDragElement() {
      // stop moving when mouse button is released:
      document.onmouseup = null;
      document.onmousemove = null;
    }
  }
  </code></pre>
  
  <blockquote>
    <p><strong>Error: Cannot read property 'id' of null at dragElement (custom.js:13) at custom.js:6</strong></p>
  </blockquote>
  
  <p>I have come across a similar error before.<br/>My suspicion is that it has something to do with loading the <code>DOM</code> vs running the <code>js</code>? </p>
  
  <p>Unfortunately I'm very new to <code>Angular</code>, with no experience in setting up basic web pages.</p>
  
  <p><strong>Does anybody have any insight?</strong></p>