opt-cc/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts

import {Component, ElementRef, ViewChild} from '@angular/core';

@Component({
  selector: 'campaign-navigation',
  templateUrl: './campaign-navigation.component.html',
  styleUrls: ['./campaign-navigation.component.css']
})
export class CampaignNavigationComponent {

  @ViewChild('horizontalList', {read: ElementRef}) public panel: ElementRef<any>;

  isLeftScrollVisible = false;

  repeater;

  constructor() {
  }

  public scrollList(scrollValue: number): void {
    console.log("call")
    this.panel.nativeElement.scrollLeft += scrollValue;
    if (this.panel.nativeElement.scrollLeft > 0) {
      this.isLeftScrollVisible = true
    } else {
      this.isLeftScrollVisible = false;
      this.clearRepeater();
    }
  }

  setRepeater(value: number) {
    this.repeater = setInterval(() => this.scrollList(value), 200);
  }

  clearRepeater() {
    clearInterval(this.repeater)
  }
}