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
Paginare i risultati con QuickGrid in Blazor
Sfruttare gli embedding e la ricerca vettoriale con Azure SQL Database
Garantire la provenienza e l'integrità degli artefatti prodotti su GitHub
Creare gruppi di client per Event Grid MQTT
Estrarre dati randomici da una lista di oggetti in C#
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Ordine e importanza per @layer in CSS
Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
Supporto ai tipi DateOnly e TimeOnly in Entity Framework Core
Sfruttare al massimo i topic space di Event Grid MQTT
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
Utilizzare Container Queries nominali