Angular горизонтальная прокрутка с динамиками c стрелки

Question

Я хочу использовать горизонтальную прокрутку со стрелками влево и вправо с динамически скрывать и показывать функциональность. Горизонтальная прокрутка (со стрелками) для Angular пакета Эта тема отвечает на этот вопрос, но без динамических c Скрыть / показать стрелки. Пожалуйста, ответьте, если кто-то имеет представление об этом. Спасибо.

Вот код ниже:. html

  <div class="custom-slider-arrow mt-sm">
    <img src="assets/img/chevron-left.svg" alt="" (click)="scrollLeft()">
  </div> 
    <div #widgetsContent class="custom-slider-main">
        <ng-container *ngFor="let object of statusList">
            <status-card ></status-card>
        </ng-container>
    </div>
    <div class="custom-slider-arrow mt-sm">
      <img src="assets/img/chevron-right.svg" alt="" (click)="scrollRight()">
      </div>

</div>

И файл .ts имеет этот код.

@ViewChild('widgetsContent',{static:false}) widgetsContent: ElementRef;

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

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

.s css file содержит

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

.custom-slider-arrow{
    display: flex;
    align-items: center;
    img{
        width: 48px;
        height: 48px;
    }
}