Angular material How to add custom text option in pageSizeOptions of mat-paginator

In questo mini articolo, vedremo tramite vari frammenti di codice la possibilità di aggiungere una voce personalizzata al controllo mat-paginator, impostando in pageSizeOptions, il tutto come mostrato qui di seguito.

Nel file di stile (scss) del componente, scriviamo dei stile che vanno a sovascrivvere ( override) il controllo. Di seguito il frammento di codice delle suddette operazioni.

Component.scss

  ::ng-deep mat-option:last-child:before{

    content: 'Tutti';

  }

  ::ng-deep mat-option:last-child .mat-option-text{

    display: none;

  }

 

Dopo aver modificato il file di stile, occorre scrivere il codice TypeScript, per la gestione della voce personalizzata.

Scriviamo una funzione, che riporta il valore di tutti i record.

Component.ts.

 

    getPageSizes(): number[] {

         

          return [5, 10, 20, this.totaleRecords];

       

      }

 

Dove TotaleRecords è una variabile di tipo number, che contiene il numero di tutti i record rilevati da un servizio web.

Nella parte delle dichiarazioni, dobbiamo aggiungere il riferimento a paginator, sopra, scriviamo la seguente dichiarazione.

 

  @ViewChild(MatPaginator)

    paginator: MatPaginator;

 

 

Siamo giunti alla conclusione di questo articolo, non resta che modificare il codice html, in particolare, impostare la proprietà pageSizeOptions, con i dati che ci interessano.

Di seguito il frammento codice delle suddette operazioni

Component.html.

 

   <mat-paginator #paginator

                               showFirstLastButtons

                               [pageSize]="pageSize"

                               [pageIndex]="pageIndex"

                               [pageSizeOptions]="!loading ? getPageSizes() : [5, 10, 20]"

                               [length]="totaleRecords"

                               (page)="pageChanged($event)">

                </mat-paginator>

 

 

Ora troveremo una voce personalizzata, con la scritta tutti.