Utilizzo delle pipe integrate
Formatti date, numeri e testo con le pipe.
Utilizzo delle pipe integrate è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.
Che cos'è una pipe?
Una pipe trasforma i dati direttamente nel template per la visualizzazione. Si scrive un valore, il carattere pipe | e poi il nome della pipe.
Le pipe sono ideali per formattare date, numeri, valute e testo senza aggiungere logica al componente.
La sintassi delle pipe
La forma di base è {{ value | pipeName }}. Angular passa il valore alla pipe e visualizza il risultato trasformato.
<!-- template -->
<p>{{ "hello" | uppercase }}</p>
<!-- renders: HELLO -->Le pipe uppercase e lowercase
uppercase e lowercase modificano maiuscole e minuscole di una stringa. Sono semplici e usate comunemente per etichette e intestazioni.
@Component({
selector: "app-demo",
template: "<p>{{ name | uppercase }}</p>"
})
export class DemoComponent {
name = "angular";
}
// renders: ANGULARLa pipe date
La pipe date formatta un oggetto Date o un timestamp in una stringa leggibile. Per impostazione predefinita usa un formato di data medio.
<p>{{ today | date }}</p>
<!-- e.g. May 30, 2026 -->
// component
today = new Date();Formattazione delle date
È possibile passare una stringa di formato alla pipe date, come "shortDate", "fullDate" o un modello personalizzato come "yyyy-MM-dd".
<p>{{ today | date:"yyyy-MM-dd" }}</p>
<!-- e.g. 2026-05-30 -->
<p>{{ today | date:"shortTime" }}</p>
<!-- e.g. 2:30 PM -->La pipe currency
La pipe currency formatta un numero come importo monetario. Per impostazione predefinita usa USD, ma è possibile passare un codice valuta.
<p>{{ price | currency }}</p>
<!-- $42.50 -->
<p>{{ price | currency:"EUR" }}</p>
<!-- €42.50 -->
// component
price = 42.5;Le pipe number e percent
La pipe number formatta i numeri con opzioni relative alle cifre, mentre percent visualizza un valore come percentuale.
<p>{{ 3.14159 | number:"1.0-2" }}</p>
<!-- 3.14 -->
<p>{{ 0.25 | percent }}</p>
<!-- 25% -->Capire digitsInfo
La pipe number accetta una stringa digitsInfo: minIntegerDigits.minFractionDigits-maxFractionDigits. Ad esempio, "1.2-2" mostra sempre esattamente due cifre decimali.
<p>{{ 7 | number:"1.2-2" }}</p>
<!-- 7.00 -->
<p>{{ 1234.5 | number:"1.0-0" }}</p>
<!-- 1,235 -->La pipe json
La pipe json serializza qualsiasi oggetto in una stringa JSON. Viene usata principalmente per il debug dei template, così è possibile visualizzare la struttura dei dati.
<pre>{{ user | json }}</pre>
<!-- { "id": 1, "name": "Ada" } -->
// component
user = { id: 1, name: "Ada" };La pipe slice
La pipe slice restituisce un sottoinsieme di un array o di una stringa, in modo simile a slice di JavaScript. È utile per troncare gli elenchi.
<p>{{ "Angular" | slice:0:4 }}</p>
<!-- Angu -->
<li *ngFor="let item of items | slice:0:3">{{ item }}</li>Importazione delle pipe nei componenti standalone
Nei componenti standalone è necessario importare le pipe utilizzate, ad esempio DatePipe o CurrencyPipe, da @angular/common.
import { DatePipe, CurrencyPipe } from "@angular/common";
@Component({
selector: "app-demo",
standalone: true,
imports: [DatePipe, CurrencyPipe],
template: "<p>{{ today | date }}</p>"
})
export class DemoComponent {
today = new Date();
}Verifica rapida
Verifichi la sua comprensione delle pipe integrate.
Riepilogo
Ha imparato a usare le principali pipe integrate: uppercase, lowercase, date, currency, number, percent, json e slice.
Le pipe mantengono la formattazione nel template in modo pulito e dichiarativo. Nel prossimo argomento concatenerà le pipe e passerà loro degli argomenti.
Domande Frequenti
La lezione «Utilizzo delle pipe integrate» è gratuita?
Sì — il testo completo di «Utilizzo delle pipe integrate» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.
Cosa imparerò in «Utilizzo delle pipe integrate»?
Formatti date, numeri e testo con le pipe. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Angular Academy?
Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Utilizzo delle pipe integrate»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Angular Academy?
Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Utilizzo delle pipe integrate
- Concatenamento e parametrizzazione delle pipe
- Creazione di pipe personalizzate
- Pipe pure e impure