Firstly, here is my angular code:
ts:
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit, AfterViewInit{
dataSource = new MatTableDataSource<Ticket>();
ticketList: Ticket[] = [];
originalTicketList: Ticket[] = [];
displayedColumns = ['id', 'findingSourceSystem', 'label', 'caseStatus', 'caseCreateTimestamp', 'resolvedBy', 'resolution', 'resolutionNote'];
filterAllForm: FormGroup;
maxall : number = 100;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: false }) sort: MatSort;
constructor(private ticket: TicketService,
private formBuilder: FormBuilder) { }
ngOnInit() {
this.filterAllForm = this.formBuilder.group({
startDate: [''],
endDate: ['']
});
this.getAllLabels();
this.getAllTicket();
this.getAllUniqueLabels();
}
ngAfterViewInit(){
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
this.getPageSizeOptions();
}
getPageSizeOptions(): number[] {
if (this.dataSource.data.length>this.maxall){
return [20, 50, this.dataSource.data.length];
}else{
return [20, 50, this.maxall];
}
}
/* some business logic*/
}
In the html file, there is one line after mat-table:
<table mat-table matTableExporter [dataSource]="dataSource" matSort class="mat-elevation-z8"
</table>
<mat-paginator [pageSizeOptions]="getPageSizeOptions()" showFirstLastButtons></mat-paginator>
I have implemented a function called getPageSizeOptions() to calculate the maximum page size. It will display like this: https://i.sstatic.net/11byg.png
Is there a way to replace the value "1647" with "all"? I tried referring to How to add 'All' option for Angular Material paginator?, but it didn't work.
I suspect it may require some changes in the scss style, but how? The use of mat-option:last-child doesn't seem to be effective for me.