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".

TypeScript elevare a potenza un numero tramite il metodo pow della classe Math

In questo frammento di codice, vedremo come elevare un numero alla potenza, nel linguaggio di programmazione TypeScript, utilizzando il metodo pow della classe Math.

TypeScript:

ngOnInit(): void {

 

  let risultatoPotenza = Math.pow(3, 4);

  // Restituisce 81 (3 elevato alla 4)

  console.log(risultatoPotenza); // Restituisce 81

  // Esempio di potenza con base 5 e esponente 3

  // Restituisce 125 (5 elevato alla 3)

  let risultatoPotenza2 = Math.pow(5, 3);

  console.log(risultatoPotenza2); // Restituisce 125

 

}

 

Angular Material visualizzare tutto il testo del tooltip anche quando è lungo

Quando si utilizza il framework Angular Material, può capitare che la gestione del Tooltip, va personalizzata, in particolar modo nel far visualizzare tutto il testo.

Il Tooltip di Angular Material, visualizza i primi caratteri, se invece vogliamo visualizzare testo lungo, o tutto il testo occorre modificare lo stile.

Di seguito si riporta il codice per modificare lo stile del tooltip.

File .scss

 

::ng-deep .mat-tooltip {

    max-width: none;  

    white-space: pre-wrap;  

    word-break: break-word;  

  }

TypeScript una semplice e modalità leggibile della condizione if

Nel linguaggio di programmazione TypeScript, possiamo trovarci nella situazione in cui dobbiamo verificare se il valore di una proprietà o variabile è di tipo null, undefined o vuoto. Di seguito la condizione if di tale situazione.

TypeScript:

<h2>

                    {{(oggetto.Proprietà != null &&  oggetto.Proprietà != undefined && oggetto.Proprietà != "") ? Azione : azion2}}

                 </h2>

 

Questa forma di if può essere più semplice, abbreviata e leggibile, di seguito un diverso approccio.

TypeScript:

<h2>

                    {{oggetto.Proprietà  ? Azione : azion2}}

                 </h2>

 

Angular creazione di un nuovo componente standalone tramite riga di comando

Nel prompt di Visual Studio Code, possiamo creare un nuovo componente di tipo standalone, tramite il seguente comando.

ng generate component NomeComponente --standalone

La creazione avviene tramite l'opzione --standalone 

Angular creazione di un progetto di tipo standalone da riga di comando

Nel caso che vogliamo creare un progetto Angular di tipo Standalone, con routing e stile di tipo scss, tramite la seguente istruzione qui di seguito, da eseguire nel prompt di Node, verrà creato un progetto con le specifiche indicate.

 

ng new NomeProgetto --standalone --routing --style=scss

Angular ERROR NullInjectorError: R3InjectorError(Environment Injector)[_HttpClient -> _HttpClient]: NullInjectorError: No provider for _HttpClient! at NodeInjectorFactory.ServizioService_Factory [as factory] (servizio.service.ts:7:29)

 

In un progetto Angular Standalone, può capitare che se usiamo dei servizi, di visualizzare  l'errore: "ERROR NullInjectorError: R3InjectorError(Environment Injector)[_HttpClient -> _HttpClient]: 

  NullInjectorError: No provider for _HttpClient!

    at NullInjector.get (core.mjs:1600:21)

    at R3Injector.get (core.mjs:2130:27)

    at R3Injector.get (core.mjs:2130:27)

    at ChainedInjector.get (core.mjs:16828:32)

    at lookupTokenUsingModuleInjector (core.mjs:4955:31)

    at getOrCreateInjectable (core.mjs:5001:10)

    at ɵɵdirectiveInject (core.mjs:16875:17)

    at Module.ɵɵinject (core.mjs:1117:40)

    at NodeInjectorFactory.ServizioService_Factory [as factory] (servizio.service.ts:7:29)

    at getNodeInjectable" 

in questo caso, perchè non è stato importato il modulo httpclientModule, nel file main.ts.

Di seguito si riporta il frammento di codice per il file main.ts, con la gestione dei provider .

TypeScript:

import { bootstrapApplication } from '@angular/platform-browser';

import { appConfig } from './app/app.config';

import { AppComponent } from './app/app.component';

import { provideHttpClient } from '@angular/common/http';

 

bootstrapApplication(AppComponent, {

  ...appConfig,

  providers: [

    ...(appConfig.providers || []),

    provideHttpClient()

  ]

}).catch(err => console.error(err));

 

In questo modo non viene generato più errore.