Horizontal Scroll using buttons on angular2

So I have this app in angular2 where I need to scroll a component horizontally but with buttons right and left. So I need a function for each button that scroll to right or left the content. I need something like this:

I tried using document.getElementById('myscrolldiv').animate({ scrollLeft: "-=" + 250 + "px"; } but Angular does not recognize the animate line.

So I am looking for a diferent way of scroll horizontally using buttons but NOT using jquery. Is there any way to do this in angular?

Here is my html

<div class="container">
<div class="side">
<mat-icon (click)="scrollLeft()">keyboard_arrow_left</mat-icon>
</div>
<div id="widgetsContent" class="middle">
<div class="scrolls">
<div class="info-widget">
WIDGET
</div>
<div class="info-widget">
WIDGET
</div>
<div class="info-widget">
WIDGET
</div>
<div class="info-widget">
WIDGET
</div>
<div class="info-widget">
WIDGET
</div>
<div class="info-widget">
WIDGET
</div>
</div>
</div>
<div class="side">
<mat-icon (click)="scrollRight()">keyboard_arrow_right</mat-icon>
</div>
</div>


And here is my css

.container {
display: flex;
height: 22.5vh !important;
}

.side {
width: 50px;
height: 22.5vh !important;
}

.middle {
flex-grow: 1;
height: 22.5vh !important;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}


So, how do I scroll right and left pushing the buttons? please help.

Continue reading...