How to add 'All' option for Angular Material paginator?
please see the actual result https://stackblitz.com/edit/angular-hpnbha-z4l4zf?file=app/table-pagination-example.ts
1) table-pagination-example.html
<mat-paginator [pageSizeOptions]="getPageSizeOptions()
2) table-pagination-example.ts
maxall : number=20;
ngOnInit() {
this.dataSource.paginator = this.paginator;
}
getPageSizeOptions(): number[] {
if (this.dataSource.paginator.length>this.maxall)
return [5, 10, 20, this.dataSource.paginator.length];
else
return [5, 10, 20, this.maxall];
}
}
3)style.css
mat-option:last-child:before{
content: 'All';
float: left;
text-transform: none;
top: 4px;
position: relative;
}
mat-option:last-child .mat-option-text{
display: none;
position: relative;
}
You could try this:
[dataSource] = "dataSource"
...
[pageSizeOptions] = "[5, 10, 25, 50, 100, dataSource.data.length]"
You could try this in your component html file under mat-paginator :
"[pageSizeOptions]="getPageSizeOptions()
"
And in your css file add following CSS, that will change the total length variable content with "All" Text :
mat-option:last-child:before{
content: 'All';
float: left;
text-transform: none;
top: 4px;
position: relative;
}
mat-option:last-child .mat-option-text{
display: none;
position: relative;
}
And in your component .ts file:
getPageSizeOptions(): number[]{
console.log(this.paginator.length);
if(this.paginator.length>this.maxperpage)
return [5, 10,50,this.maxperpage, this.dataSource.data.length];
else
return [5,10,50, this.maxperpage];
}
Hopefully this will help!!!