How to scroll an element in angular4?

I'm having a hard time finding angular example using scroll animation. I am using angular 4 and I am trying to scroll an element.

Element template:

// Valuable part of component template
<ol #indicatorsList class="carousel-indicators" *ngIf="slides.length > 1">
<li *ngFor="let slide of slides; let i = index;" (click)="selectSlide(i)"
    [class.active]="slide.active === true">
// some content inside
</li>

      

The component class looks like this:

export class NewsCarouselComponent { 

    @ViewChild('indicatorsList')
    indicatorsList: ElementRef; 

    protected _slides: LinkedList<NewsSlideComponent> = new LinkedList<NewsSlideComponent>(); 

    public get slides(): NewsSlideComponent[] {
         return this._slides.toArray();
    }

    public selectSlide(index: number): void {
        this.activeSlide = index;
        let indicatorsHeight = this.indicatorsList.nativeElement.offsetHeight;
        let indicatorsCount = this.indicatorsList.nativeElement.childElementCount;
        let scrollTo = indicatorsHeight / indicatorsCount * index;
        // how to scroll element to position calculated as scrollTo?
      }
}

      

I would like to do this without using jQuery.

+3


source to share





All Articles