title: Horizontal Scroll using buttons on angular2
body: <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>