Horizontal Scroll using buttons on angular2 : <p>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:
<a href="https://i.stack.imgur.com/eJaau.png" rel="noreferrer"><img src="https://i.stack.imgur.com/eJaau.png" alt="enter image description here"></a></p>

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

<p>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?</p>

<p>Here is my html</p>

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

<p>And here is my css</p>

<pre><code>.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;
}
</code></pre>

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