Я недавно начал использовать Angular Материал. Я не могу понять, как использовать scrollTo или я должен использовать другой метод. Я не смог найти пример кода. Мне нужно добавить 2 кнопки, чтобы прокрутка работала, нажимая влево и вправо, чтобы она выглядела как карусель. Пожалуйста, помогите мне, скажите мне, что мне нужно сделать, чтобы это сработало.
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit }
from '@angular/core';
import { BecomeAMemberScrollingService }
from '../service/become-a-member-scrolling.service';
@Component({
selector: 'virtual-scroll',
template: '<h2 class="reviews__title title">Reviews</h2>
<div class="virtual-scroll-data">
<cdk-virtual-scroll-viewport orientation="horizontal" itemSize="50"
class="scroll-viewport">
<div *cdkVirtualFor="let item of items; index as i"
class="scroll-data-item">{{i+1 + '. ' + item}}</div>
</cdk-virtual-scroll-viewport>
</div>
<div>
<button (click)="">Left</button>
<button (click)="">Right</button>
</div>',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class BecomeAMemberScrollingComponent implements OnInit {
public items: any[];
constructor(private cdrf: ChangeDetectorRef,
private scrollingData: BecomeAMemberScrollingService ) {
}
ngOnInit(): void {
this.scrollingData.getDataScrolling().subscribe(data => {
this.items = data;
});
}
}
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
@Injectable()
export class BecomeAMemberScrollingService {
public getDataScrolling(): Observable<any[]> {
const p = 'Lorem ipsum dolor sit amet,' +
' consectetur adipiscing elit, ' +
'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ' +
'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ' +
'nisi ut aliquip ex ea commodo consequat.';
const arr = [];
for (let i = 0; i < 100; i++) {
arr.push(p);
}
return of(arr);
}
}