Issue
So, I am using this different table library for my table and created a custom paginator. I want to use this paginator-goto in the table. How can i use the paginator for table to work.
The table is a custom table library and therefore I am not sure how to use the dataSource with the pagination. I just need pagination to response when i click next or previous.
here is the pagination demo. https://stackblitz.com/edit/mat-paginator-with-goto-5fxwvm?file=src/app/mat-paginator-goto/mat-paginator-goto.component.html
Solution
To change the "labels" of < and >, the docs (see the example of internationalization) indicate how change the "tooltip"
Adding a MyCustomPaginatorIntl
export class MyCustomPaginatorIntl implements MatPaginatorIntl {
changes = new Subject<void>();
firstPageLabel = "First page"
itemsPerPageLabel = "Items per page:"
lastPageLabel = "Last page:"
nextPageLabel = "Next";
previousPageLabel = "Previous";
getRangeLabel(page: number, pageSize: number, length: number): string {
if (length === 0) {
return "Page 1 of 1";
}
const amountPages = Math.ceil(length / pageSize);
return `Page ${page + 1} of ${amountPages}`;
}
}
And use as provider -you can do it in app.module or in your component
providers:[{provide:MatPaginatorIntl,useClass:MyCustomPaginatorIntl}],
But if we want to change the "<" and the ">" we need work with the class
We can write in our styles.css -not work if we don't use a styles for all the aplication
.mat-paginator-navigation-next .mat-button-wrapper,
.mat-paginator-navigation-previous .mat-button-wrapper
{
color:transparent!important;
}
.mat-paginator-navigation-previous
{
width:5em!important;;
}
.mat-paginator-navigation-next::after{
content:attr(aria-label);
margin-left:-2em;
}
.mat-paginator-navigation-previous::after{
content:attr(aria-label);
margin-left:-2em;
}
In the stackblitz are an example of it's using the ashraful Islam's custom paginator
Answered By - Eliseo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.