loading data from api asynchronously and dynamically setting page number. loading onInit

src/app/statistics/statistics.component.ts

@@ -1,13 +1,11 @@
 import {Component, inject} from '@angular/core';
 import {HttpService} from '../http.service';
 import {
-  Eintrittskarte,
-  Film,
   StatisticsFilm,
-  StatisticsFilmReduced,
-  StatisticsReduced, StatisticsVorstellungReduced,
-  Vorstellung
+  StatisticsVorstellung,
 } from '@infinimotion/model-frontend';
+import {LoadingService} from '../loading.service';
+import {firstValueFrom, forkJoin} from 'rxjs';
 
 @Component({
   selector: 'app-statistics',
@@ -17,22 +15,37 @@ import {
 })
 export class StatisticsComponent {
   private http = inject(HttpService);
-  private movies: StatisticsFilmReduced[] = []
-  private shows: StatisticsVorstellungReduced[] = []
+  protected movies: StatisticsFilm[] = [];
+  protected shows: StatisticsVorstellung[] = [];
+  protected moviesDisplayedColumns: string[] = ['id', 'title', 'earnings', 'tickets'];
+  protected showsDisplayedColumns: string[] = ['id', 'hall', 'movie_title', 'date', 'earnings', 'tickets'];
+  protected movieResultsLength: number = 0;
+  protected showsResultLength: number = 0;
+
+  private loading = inject(LoadingService);
 
   ngOnInit(): void {
-    this.loadData();
+    this.loading.show()
+    this.loadData().then();
   }
 
-  loadData() {
-    this.http.getStatisticsList().subscribe({
-      next: (response) => {
-        this.movies = response.movies;
-        this.shows = response.shows;
-        console.log(this.movies)
-        console.log(this.shows)
-      },
-      error: (err) => console.error('Fehler beim Laden der Statistiken', err),
-    });
+  async loadData() {
+    let movieRequest = this.http.getMovieStatistics();
+    let showRequest = this.http.getShowStatistics();
+    let movieResponse = await firstValueFrom(movieRequest);
+    let showResponse = await firstValueFrom(showRequest);
+    this.movies = movieResponse
+    this.shows = showResponse
+    if (this.movies.length / 30 < 1) {
+      this.movieResultsLength = 1;
+    } else {
+      this.movieResultsLength = Math.ceil(this.movies.length / 30);
+    }
+    if (this.shows.length / 30 < 1) {
+      this.showsResultLength = 1;
+    } else {
+      this.showsResultLength = Math.ceil(this.shows.length / 30);
+    }
+    this.loading.hide();
   }
 }