I am using Material Angular 18.2.8 and have the following problem:
I have my custom paginator class that extends MatPaginatorIntl like this (don't mind the strings it was just for debugging purposes for now):
import { Injectable } from "@angular/core";
import { MatPaginatorIntl } from "@angular/material/paginator";
import { Subject } from "rxjs";
@Injectable({
providedIn: 'root'
})
export default class CustomPaginatorIntl extends MatPaginatorIntl {
override changes = new Subject<void>(); //might be obsolete, just copied it from the docs
constructor() {
super();
}
// For internationalization, the `$localize` function from
// the `@angular/localize` package can be used.
override firstPageLabel = `WASDASD1`;
override itemsPerPageLabel = `WASDASD1 per page:`;
override lastPageLabel = `Last WASDASD1`;
// You can set labels to an arbitrary string too, or dynamically compute
// it through other third-party internationalization libraries.
override nextPageLabel = 'WASDASD1 page';
override previousPageLabel = 'WASDASD1 page';
override getRangeLabel = (page: number, pageSize: number, length: number) => {
return "WASD";
}
}
I provide it like this into my component with the table:
@Component({
selector: 'app-notes-table',
standalone: true,
imports: [MatDividerModule, MatTableModule, MatPaginatorModule, MatCheckboxModule, MatProgressSpinnerModule],
templateUrl: './notes-table.component.html',
styleUrl: './notes-table.component.css',
providers: [{ provide: MatPaginatorIntl, useClass: CustomPaginatorIntl }]
})
But if I try to set it as the paginator to my data source like this:
notes: MatTableDataSource<Note> = new MatTableDataSource<Note>();
@ViewChild(MatPaginatorIntl) paginator!: MatPaginatorIntl;
ngAfterViewInit(): void {
// this.notes.paginator = this.paginator;
this.notes.paginator = this.paginator;
}
I get the error:
TS2740: Type 'MatPaginatorIntl' is missing the following properties from type 'MatPaginator': _intl, _changeDetectorRef, _pageSizeLabelId, _intlChanges, and 32 more.
Is it not possible to use MatPaginatorIntl as a paginator for a data source?
The component is still MatPaginator, the Intl is just the text provider for the component. You can't view an Intl. You already provided the Intl in the component, which sets it for the table.
Try to update your ViewChild
@ViewChild(MatPaginator) paginator!: MatPaginator;