title: scrolling a div in angular 4 on button click
body: <p>I want the contents of a div to scroll to left on click of a button and right on click of another button.</p>
  
  <p>ScrollLeft does'nt seem to work..</p>
  
  <p>html</p>
  
  <pre><code>&lt;button id="Left" (click)="leftScroll()"&gt;Left&lt;/button&gt;       
  &lt;div id="myDiagramDiv1" style=" overflow: hidden; overflow-y: hidden;"&gt;&lt;/div&gt;
  &lt;button id="right" (click)="rightScroll()"&gt;Right&lt;/button&gt;   
  </code></pre>
  
  <p>code</p>
  
  <pre><code>export class ComponentViewPage implements OnInit {
  
     leftScroll() {     
          event.preventDefault();
          $('myDiagramDiv1').animate({
              scrollLeft: "+=200px"
          }, "slow");       
      }    
  
      rightScroll() {     
          event.preventDefault();
          $('myDiagramDiv1').animate({
              scrollLeft: "-=200px"
          }, "slow");       
      }    
  }
  </code></pre>