Using Angular Paginator on Table with Data passed from parent

I am currently trying to figure out how to use the paginator and table from Angular Materials properly. I can display data but I have been trying to figure out for hours how to get the paginator to work. As for my structure I have a parent component which contains a child component and passes data to it via @Input.

In my Parent-Component HTML:

<div class="row"><app-export-preview [dataSource]="tableDataFilterResult"></app-export-preview></div>


In my Parent-Component TS I do a REST-Call and set my Data like this

this.filterResult = response[0]['records'];
this.tableDataFilterResult = new MatTableDataSource<any>(this.filterResult);


The REST-Call is called after a button, so basically the paginator and table exists before any data exists.

In my child component TS:

export class ExportPreviewComponent implements OnInit, AfterViewInit {

displayedColumns: string[] = ['number', 'name', 'reference', 'date', 'creator', 'coordinates', 'recordId'];

@Input()
dataSource: MatTableDataSource<any>;

@ViewChild(MatPaginator) paginator: MatPaginator;


constructor() {

}


ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
}

ngOnInit(): void {
this.dataSource.data = this.dataSource.data;
}
}


And my paginator in my child component HTML looks like this:

<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>


I am quite new to angular and i have tried for a while to find a solution. If anybody has any idea how to get the paginator to work, i would be thankful!

Continue reading...