How to disable the left arrow on scroll?

Question

Angular

<div class="pull-left mt-sm">
  <i class="icon-arrow-left pointer" (click)="scrollLeft()"></i>
</div>   

 <div #widgetsContent class="custom-slider-main">
        <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
          <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
          <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
          <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
          <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
          <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
    </div>

<div class="pull-right mt-sm">
  <i class="icon-arrow-right pointer" (click)="scrollRight()"></i>
</div>

@ViewChild('widgetsContent') widgetsContent: ElementRef;

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

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

Hello. There is such a simple code. The essence of logic is simple. Some content in a div will scroll when you click the right and left buttons. Everything is working. But how do you add a state so that the left scroll button is disabled when the content is in the leftmost position, and do the same for the right button when the content is scrolled in the rightmost position?