Quando mettiamo in binding una proprietà di un component con un frammento di HTML, stiamo generando HTML con il valore della proprietà. Questo semplice processo può essere intercettato per personalizzare come la proprietà viene poi rappresentata nel codice HTML.
Un classico esempio di personalizzazione dell'output di una proprrietà è quando si ha a che fare con le date. In questi casi la proprietà del component è di tipo Date, ma sicuramente nel codice HTML vogliamo una stringa con la data formattata. Per poter formattare l'output dobbiamo utilizzare una Pipe e nel caso delle date ne abbiamo già una offerta da Angular 2: Date. L'utilizzo di questa Pipe è molto semplice come si evince dall'esempio:
import { Component } from '@angular/core'; @Component({ selector: 'DateComponent', template: `<p>The date is {{ Value | date }}</p>` }) export class DateComponent { Value = new Date(1979, 3, 11); }
Una Pipe si esprime inserendo un carattere "|" dopo l'espressione di binding e aggiungendo poi il nome della classe che rappresenta la Pipe (date in questo caso).
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Gestire il colore CSS con HWB
Utilizzare un numero per gestire la concorrenza ottimistica con SQL Server ed Entity Framework
Gestire la cancellazione di una richiesta in streaming da Blazor
Simulare Azure Cosmos DB in locale con Docker
Miglioramenti agli screen reader e al contrasto in Angular
Filtering sulle colonne in una QuickGrid di Blazor
.NET Conference Italia 2024
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Creare una libreria CSS universale: Cards
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Generare HTML a runtime a partire da un componente Razor in ASP.NET Core
Utilizzare il metodo Index di LINQ per scorrere una lista sapendo anche l'indice dell'elemento