I have been experimenting with some code and you can find it here: Test my Code on Stackblitz
To customize the labels of MatPaginator, I am using an extended MatPaginatorIntl class successfully. However, I want to introduce a custom variable (referred to as someProperty in this code snippet):
import { MatPaginatorIntl } from '@angular/material/paginator';
import { Injectable } from '@angular/core';
@Injectable()
export class CustomMatPaginatorIntl extends MatPaginatorIntl {
public someProperty: number;
constructor() {
super();
this.getAndInitTranslations();
}
setSomeProperty(value:number)
{
this.someProperty = value;
}
getAndInitTranslations() {
this.itemsPerPageLabel = "Items per page";
this.nextPageLabel = "Next";
this.previousPageLabel = "Previous";
this.changes.next();
}
override getRangeLabel = (page: number, pageSize: number, length: number) => {
return `${this.someProperty}`; // use someProperty here
}
}
In the paginator-configurable-example.ts file, I am trying to set that variable (e.g. in OnInit), but my current approach is not yielding results (apologies if it's totally off):
export class PaginatorConfigurableExample implements OnInit{
@ViewChild(MatPaginatorIntl) pag: MatPaginatorIntl;
// MatPaginator Inputs
length = 100;
pageSize = 10;
pageSizeOptions: number[] = [5, 10, 25, 100];
// MatPaginator Output
pageEvent: PageEvent;
setPageSizeOptions(setPageSizeOptionsInput: string) {
this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
}
ngOnInit(): void {
// SET MatPaginatorIntl variable
this.pag.setSomeProperty(100);
}
}
How can I access the customized variable from the PaginatorConfigurableExample code?