title: Angular Mouse Click and Drag Scroll in Horizontal
body: <p>I am implementing a drag-on scroll feature in angular by referring to this <a href="https://stackoverflow.com/questions/28576636/mouse-click-and-drag-instead-of-horizontal-scroll-bar-to-view-full-content-of-c">Mouse click and Drag Instead of Horizontal Scroll bar( To view full content of child Div)</a> StackOverflow answer. But I am getting Cannot read property 'offsetLeft' of null error. I had linked my stackblitz code <a href="https://stackblitz.com/edit/angular-ivy-9mnvct?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">link</a></p>
  <p>My HTML Code:</p>
  <pre><code>&lt;div class=&quot;parent&quot;  (mousedown) =&quot;startDragging($event, false)&quot; (mouseup) =&quot;stopDragging($event, false)&quot; (mouseleave) =&quot;stopDragging($event, false)&quot; (mousemove)=&quot;moveEvent($event)&quot;&gt;
  &lt;div class=&quot;child&quot;&gt;    
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum        
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>My CSS Code</p>
  <pre><code>.parent{
    width:300px;
    border:5px solid red;
    overflow-x: hidden; 
    float:left;
  }
  .child{
    width:1000px;
    float:left;
    font-size:15px;
    font-family:arial;
    padding:10px;
    cursor: pointer;
  } 
  </code></pre>
  <p>My TS Code:</p>
  <pre><code>export class AppComponent {
  
    mouseDown = false;
  
    startX: any;
  
    scrollLeft: any;
  
    slider = document.querySelector&lt;HTMLElement&gt;('.parent');
  
    startDragging(e, flag) {
      console.log(e);
      this.mouseDown = false;
      this.startX = e.pageX - this.slider.offsetLeft;
      this.scrollLeft = this.slider.scrollLeft;
    }
    stopDragging(e, flag) {
      this.mouseDown = false;
    }
    moveEvent(e) {
      e.preventDefault();
      if (!this.mouseDown) {
        return;
      }
      const x = e.pageX - this.slider.offsetLeft;
      const scroll = x - this.startX;
      this.slider.scrollLeft = this.scrollLeft - scroll;
    }
  }
  </code></pre>
  <p>Can anyone help me find the solution for it and share your knowledge as I am new to angular?</p>