How to add 'All' option for Angular Material paginator?

Question

I would like an option to display all rows in the table. Angular Material only supports numbers for page size options. I need something like this:

[pageSizeOptions]="[5, 10, 25, 50, 100, 'All']"

Answer 1

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;
}

Answer 2

You could try this:

[dataSource] = "dataSource"
...
[pageSizeOptions] = "[5, 10, 25, 50, 100, dataSource.data.length]"

Answer 3

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!!!