Q: scrolling a div in angular 4 on button click I want the contents of a div to scroll to left on click of a button and right on click of another button.
ScrollLeft does'nt seem to work..
html
<button id="Left" (click)="leftScroll()">Left</button>       
<div id="myDiagramDiv1" style=" overflow: hidden; overflow-y: hidden;"></div>
<button id="right" (click)="rightScroll()">Right</button>   

code
export class ComponentViewPage implements OnInit {

   leftScroll() {     
        event.preventDefault();
        $('myDiagramDiv1').animate({
            scrollLeft: "+=200px"
        }, "slow");       
    }    

    rightScroll() {     
        event.preventDefault();
        $('myDiagramDiv1').animate({
            scrollLeft: "-=200px"
        }, "slow");       
    }    
}


A: if you want to use jquery, you have to inistall it:
1- inistall jquery
npm i jquery --save

2- import it into angular.json
node_modules/jquery/dist/jquery.js

3- use it into component
import * as JQuery from "jquery";
const $ = JQuery.default;

see live example: https://stackblitz.com/edit/angular-ffzzm9

A: try into HTML
<div #list [scrollTop]="list.scrollHeight"></div>

In Component
define id into html id="scrollId"
const element = document.querySelector('#scrollId');
element.scrollIntoView();

you can use document.getElementById if querySelector isn't working for you. 
