Angular - Jak zrobić paginacje z api

Cześć, mam dane api: https://www.cryptingup.com/apidoc/#assets

Widzę, że jest możliwość paginacji ale nie za bardzo wiem jakby zacząć, dać dwa buttony prev i next i jakoś snapshotować ze ścieżki? Mieliście podobne zadania? Jak to rozwiązaliście
Pozdrawiam

Aktualny kod z serwisu

  opts = { params: new HttpParams({fromString: "?size=10&start=10"}) };

  constructor(private http: HttpClient) { }

  public getAssets(): Observable<IAsset[]> {
    return this.http.get<any>('/api/assets', this.opts).pipe(
      map(response => response.assets)
    )
  }

  public nextPage() {

  }

Pierwszy strzał do API bez parametrów, następny podajesz start jako page * size - i w sumie to chyba tyle. Musisz sobie tylko gdzieś size i page zapisać.

function getAssets(size = 10, start = 0): Observable<Assets> {
  const params = {
    size: size,
    start: start
  };

  ({} as HttpClient).get("https://www.cryptingup.com/api/assets", {
    params: params
  })
}

EDIT: musisz tylko jeszcze zamiast ({} as HttpClient) wrzucić prawdziwą instancję HttpClienta

@Aisekai:
Obecnie:

  dataSource = new MatTableDataSource<IAsset>();
  displayedColumns = ['id', 'name', 'price', 'info'];
  pageNumber = 0;

  constructor(private dataService: DataService, private dialog: MatDialog) {}

  ngOnInit() {
    this.getAssets(this.pageNumber)
  }

  showCurrencyDetails(currency: IAsset) {
    this.dialog.open(DialogComponent, {
      data: currency
    });
  }

  nextPage() {
    this.pageNumber += 10;
    this.getAssets(this.pageNumber)
  }

  getAssets(start: number) {
    this.dataService.getAssets(start).subscribe(assets => {
      this.dataSource.data = assets
    })
  }
}

Tylko widze ze mam duzo wyslanych requestów :/

@Mateuszto:
Serwis

export class DataService {
  constructor(private http: HttpClient) { }

  public getAssets(start: number): Observable<IAsset[]> {
    const params = {
      size: 10,
      start: start
    };

    return this.http.get<any>('/api/assets', {
      params: params
    }).pipe(
      map(response => response.assets)
    )
  }
}

Pokaż komponent, resolvera czy cokolwiek gdzie to wykorzystujesz. Dwa - jeżeli chcesz zapiąć pod to paginacje, to oczywiście że Ci się zwiększy liczba requestow. No chyba, że wyciągniesz to wszystko jednym requestem i wtedy będziesz tylko slice'ował dane.

Ok, jeżeli nie możesz zmienić API i się jakoś musisz zmniejszyć liczbę requestów to albo jakiś operator typu retry / retryWithDelay przy fetchowaniu danych, albo zmiana mechanizmu "klikania" na coś w stylu:

  @ViewChild('buttonNext') nextPage: ELementRef<HTMLElement>;
  componentDestroyed = new Subject();
  afterViewInit() {
    fromEvent(this.nextPage.nativeElement, 'click').pipe(
      tap(_ => this.updateNextPage()), // zmiana page bez callu do API
      debounceTime(200),
      switchMap(_ => this.getAssets()),
      takeUntil(this.componentDestroyed)
    ).subscribe()
  }

Nie pokażę Ci jak wykorzystać retry ale to spokojnie do wygooglowania jest. Nie wiem jakie ograniczenia ma to API, być może retryWithDelay będzie lepszym rozwiązaniem.