Can't display the chosen items per page using Pagination (Angular)

I am using Angular's Pagination (Angular Material) to display items on a table that I get from an external API.

Right now I can only see the initial (default) number of items (count) that are in each page.

My problem is that I can't change the displayed items per page when I choose another number, they stay the same.

What am I doing wrong, am I missing something?

characters.component.html

<div class="main-container">
<mat-form-field appearance="outline">
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input>
</mat-form-field>

<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">

<ng-container matColumnDef="CharacterName">
<th mat-header-cell *matHeaderCellDef> Character Name </th>
<td mat-cell *matCellDef="let element">
{{element.name}}
</td>
</ng-container>

<ng-container matColumnDef="TvShows">
<th mat-header-cell *matHeaderCellDef> Tv Shows </th>
<td mat-cell *matCellDef="let element"> {{element.tvShows}} </td>
</ng-container>

<ng-container matColumnDef="VideoGames">
<th mat-header-cell *matHeaderCellDef> Video Games </th>
<td mat-cell *matCellDef="let element"> {{element.videoGames}} </td>
</ng-container>

<ng-container matColumnDef="Allies">
<th mat-header-cell *matHeaderCellDef> Allies </th>
<td mat-cell *matCellDef="let element"> {{element.allies}} </td>
</ng-container>
<ng-container matColumnDef="Enemies">
<th mat-header-cell *matHeaderCellDef> Enemies </th>
<td mat-cell *matCellDef="let element"> {{element.enemies}} </td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<mat-paginator
[pageSize]="paginatorConfig?.items_count"
[pageSizeOptions]="paginatorConfig?.pageSizeOptions"
[length]="paginatorConfig?.total_items"
showFirstLastButtons (page)="paginatorChanges($event)"></mat-paginator>
</div>
</div>


characters.component.ts

import { HttpService } from './../http.service';
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

@Component({
selector: 'app-characters',
templateUrl: './characters.component.html',
styleUrls: ['./characters.component.scss']
})
export class CharactersComponent implements OnInit {

displayedColumns: string[] = [
'CharacterName',
'TvShows',
'VideoGames',
'Allies',
'Enemies',
];
dataSource;
paginatorConfig: {
items_count: number,
total_items: number,
pageSizeOptions: number[];
}

// pageSizeOptions: number[] = [10, 20, 50, 100, 200, 500];

constructor(
private http: HttpService
) { }

ngOnInit(): void {
this.getCharList();
}

getCharList(pageIndex?: number, pageSizeOptions?: number[]) {
this.http.getCharacters(pageIndex, pageSizeOptions)
.subscribe((resp: any) => {
this.dataSource = new MatTableDataSource(resp.data);
this.paginatorConfig = {
items_count: resp.count,
total_items: resp.count * resp.totalPages,
pageSizeOptions: [resp.count * 10, 20]
};
});
}

//Search and find desired character
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}

paginatorChanges(event) {
this.getCharList(event.pageIndex + 1);
}
}



http.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class HttpService {

constructor(private http: HttpClient) { }

getCharacters(pageIndex: number = 1, pageSizeOptions: number[] = [10, 20, 50, 100, 200, 500]) {
return this.http.get(`https://api.disneyapi.dev/characters/?page=${pageIndex}&per_page=${pageSizeOptions}`);
}
}

Continue reading...