Horizontal Scroll using buttons on angular2

Question

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

Answer 1

Consider the following solution

In .html

    

         WIDGET
      
      

         WIDGET
      
      

         WIDGET
      
      

         WIDGET
      
      

         WIDGET
      
      

         WIDGET
      

In .scss

.custom-slider-main{
    display: flex;
    overflow: hidden;    
    scroll-behavior: smooth;
}

In .ts

@ViewChild('widgetsContent') widgetsContent: ElementRef;

And On click of left/right button use the following functions

scrollLeft(){
    this.widgetsContent.nativeElement.scrollLeft -= 150;
  }

  scrollRight(){
    this.widgetsContent.nativeElement.scrollLeft += 150;
  }