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.