прокрутка div в угловых 4 на нажатие кнопки

Question

Я хочу, чтобы содержимое div прокручивалось влево при нажатии кнопки и при нажатии правой кнопки другой кнопки.

ScrollLeft не работает ..

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>   

код

export class ComponentViewPage implements OnInit {

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

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

Answer 1

Если вы хотите использовать jquery, вы должны установить его:

1 - inistall jquery

npm i jquery --save

2 - импортировать его в angular.json

node_modules/jquery/dist/jquery.js

3 - использовать его в компоненте

import * as JQuery from "jquery";
const $ = JQuery.default;

см. Пример в реальном времени: https://stackblitz.com/edit/angular-ffzzm9

Answer 2

попробуйте HTML

<div #list [scrollTop]="list.scrollHeight"></div>

В Компоненте определите id в html id="scrollId"

const element = document.querySelector('#scrollId');
element.scrollIntoView();

, вы можете использовать document.getElementById, если querySelector не работает для вас.