Angular material paginator don't work when I save a change on the code

When I start the project, the paginator works fine, but if I change something in the code, it stops working, and only work again if I 1)restart the project, 2) add a new item to my list. I've tried adding logs, but it looks like the paginator behavior doesn't change.

import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import { DenunciaService } from '../../../services/denuncia.service';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { Denuncia } from '../../../interfaces/denuncia';
import { MatIconModule } from '@angular/material/icon';
import { MatButton, MatButtonModule } from '@angular/material/button';
import { Router } from '@angular/router';
import { CommonModule } from '@angular/common';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';



@Component({
selector: 'lista-denuncia',
imports: [CommonModule, MatFormFieldModule, MatInputModule, MatTableModule, MatIconModule, MatButtonModule, MatButton, MatPaginatorModule],
templateUrl: './lista-denuncia.component.html',
styleUrls: ['./lista-denuncia.component.css'],
})
export class ListaDenunciaComponent implements OnInit, AfterViewInit {

denunciaData: Denuncia[] = [];

constructor(private denunciaService: DenunciaService, private router: Router) { }

displayedColumns: string[] = ['Relato', 'Status','Data', 'Acoes'];
dataSource = new MatTableDataSource<Denuncia>(([]));
@ViewChild(MatPaginator) paginator!: MatPaginator;

ngOnInit(): void {
this.getDenuncia();

}

ngAfterViewInit() {

this.dataSource.paginator = this.paginator;
}

getDenuncia(): void {
this.denunciaService.getDenuncia().subscribe({
next: (data: Denuncia[]) => {
this.denunciaData = data.map(denuncia => ({
...denuncia,
dataEmissao: new Date(denuncia.dataEmissao),
}));
this.dataSource.data = this.denunciaData;
},
error: err => console.error('Error fetching data:', err),
});
}


deleteDenuncia(id: number): void {
this.denunciaService.deleteDenuncia(id).subscribe({
next: () => {
this.dataSource.data = this.dataSource.data.filter(denuncia => denuncia.id !== id);

},
error: err => {
console.error('Erro ao deletar o recurso:', err);
}
});
}

navigateToNovaDenuncia() {
this.router.navigate(['criar-denuncia']);
}

applyFilter(event: Event): void {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}

}



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

<button mat-stroked-button (click)="navigateToNovaDenuncia()" class="navigate-button">Nova Denúncia</button>


<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort>
<ng-container matColumnDef="Relato">
<th mat-header-cell *matHeaderCellDef style="text-align: center;"> relato </th>
<td mat-cell *matCellDef="let element" style="text-align: center;"> {{element.relato}} </td>
</ng-container>
<ng-container matColumnDef="Status">
<th mat-header-cell *matHeaderCellDef style="text-align: center;"> Status </th>
<td mat-cell *matCellDef="let element" style="text-align: center;"> {{element.statusRD}} </td>
</ng-container>
<ng-container matColumnDef="Data">
<th mat-header-cell *matHeaderCellDef style="text-align: center;"> Data </th>
<td mat-cell *matCellDef="let element" style="text-align: center;">
{{ element.dataEmissao | date: 'dd/MM/yyyy' }}
</td>
</ng-container>




<ng-container matColumnDef="Acoes">
<th mat-header-cell *matHeaderCellDef style="text-align: center;"> Ações </th>
<td mat-cell *matCellDef="let element" style="text-align: center;">
<button mat-stroked-button (click)="deleteDenuncia(element.id)">
Deletar
</button>
</td>
</ng-container>

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

<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">Nenhuma informação encontrada "{{input.value}}"</td>
</tr>

</table>
<mat-paginator
[pageSizeOptions]="[2, 10, 20]"
[pageSize]="2"
showFirstLastButtons
aria-label="Select page of periodic elements">
</mat-paginator>




I already tried adding "ChangeDetectorRef", it doesn't work as well. If I mock the page item it also doesn't work so I know that is something related to how the paginator is configured.

Continue reading...