Angular material impostare in pageSizeOptions del controllo mat-paginator del testo che indica visualizza tutti i record con TypeScript

Utilizzando il controllo mat-paginator di Angular Material può capitare l'esigenza di personalizzare i valori presenti pageSizeOptions con del testo, il tutto come mostrato qui di seguito.

La voce personalizzata

Supponiamo di voler visualizzare il testo "tutti" tra i vari elementi da visualizzare nella pagina di una Table, che al click visualizzi tutti i record, tramite questa tecnica possiamo impostare dei valori personalizzati.

Nel file di stile (scss) del componente, inseriamo gli stili di override del 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, scriviamo del codice nella parte .ts, in particolare  un metodo che restituisce le varie voci.

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.

Sopra, in alto, nella parte delle dichiarazioni, scriviamo il seguente codice.

 

  @ViewChild(MatPaginator)

    paginator: MatPaginator;

Ora non resta che modificare il codice html, in particolare caricare i dati nella combo, dopo che il servizio restituisca i dati.

Di seguito il frammento di codice di esempio.

Component.html

 

   <mat-paginator #paginator

                               showFirstLastButtons

                               [pageSize]="pageSize"

                               [pageIndex]="pageIndex"

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

                               [length]="totaleRecords"

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

                </mat-paginator>

 

Nel controllo sarà visibile la voce "tutti".