3

I have a trouble to find angular example with scroll animation usage. I'm using angular 4 and I try to scroll 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>

Component class looks like that:

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.

Vadym Perepeliak
  • 215
  • 1
  • 3
  • 10

0 Answers0