Używanie wbudowanych potoków
Formatuj daty, liczby i tekst za pomocą potoków.
Używanie wbudowanych potoków to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.
Czym jest pipe?
Pipe przekształca dane bezpośrednio w szablonie na potrzeby ich wyświetlenia. Należy podać wartość, znak potoku |, a następnie nazwę pipe.
Pipe świetnie nadają się do formatowania dat, liczb, walut i tekstu bez dodawania zbędnej logiki do komponentu.
Składnia pipe
Podstawowa postać to {{ value | pipeName }}. Angular przekazuje wartość do pipe i renderuje przekształcony wynik.
<!-- template -->
<p>{{ "hello" | uppercase }}</p>
<!-- renders: HELLO -->Pipe uppercase i lowercase
uppercase i lowercase zmieniają wielkość liter w ciągu znaków. Są proste i często używane w etykietach oraz nagłówkach.
@Component({
selector: "app-demo",
template: "<p>{{ name | uppercase }}</p>"
})
export class DemoComponent {
name = "angular";
}
// renders: ANGULARPipe date
Pipe date formatuje obiekt Date lub znacznik czasu do postaci czytelnego ciągu znaków. Domyślnie używa średnio szczegółowego formatu daty.
<p>{{ today | date }}</p>
<!-- e.g. May 30, 2026 -->
// component
today = new Date();Formatowanie dat
Do pipe date można przekazać ciąg formatu, na przykład "shortDate", "fullDate" lub niestandardowy wzorzec, taki jak "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 -->Pipe currency
Pipe currency formatuje liczbę jako kwotę pieniężną. Domyślnie używa USD, ale można przekazać kod waluty.
<p>{{ price | currency }}</p>
<!-- $42.50 -->
<p>{{ price | currency:"EUR" }}</p>
<!-- €42.50 -->
// component
price = 42.5;Pipe number i percent
Pipe number formatuje liczby zgodnie z opcjami dotyczącymi cyfr, a percent wyświetla wartość jako procent.
<p>{{ 3.14159 | number:"1.0-2" }}</p>
<!-- 3.14 -->
<p>{{ 0.25 | percent }}</p>
<!-- 25% -->Zrozumienie digitsInfo
Pipe number przyjmuje ciąg digitsInfo: minIntegerDigits.minFractionDigits-maxFractionDigits. Na przykład "1.2-2" zawsze wyświetla dokładnie dwa miejsca po przecinku.
<p>{{ 7 | number:"1.2-2" }}</p>
<!-- 7.00 -->
<p>{{ 1234.5 | number:"1.0-0" }}</p>
<!-- 1,235 -->Pipe json
Pipe json serializuje dowolny obiekt do ciągu JSON. Służy głównie do debugowania szablonów, aby można było zobaczyć strukturę danych.
<pre>{{ user | json }}</pre>
<!-- { "id": 1, "name": "Ada" } -->
// component
user = { id: 1, name: "Ada" };Pipe slice
Pipe slice zwraca podzbiór tablicy lub ciągu znaków, podobnie jak funkcja slice w JavaScript. Jest przydatny do skracania list.
<p>{{ "Angular" | slice:0:4 }}</p>
<!-- Angu -->
<li *ngFor="let item of items | slice:0:3">{{ item }}</li>Importowanie pipe w komponentach samodzielnych
W komponentach samodzielnych należy importować używane pipe, na przykład DatePipe lub CurrencyPipe, z pakietu @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();
}Szybkie sprawdzenie
Sprawdź swoją wiedzę na temat wbudowanych pipe.
Podsumowanie
Poznali Państwo najważniejsze wbudowane pipe: uppercase, lowercase, date, currency, number, percent, json i slice.
Pipe pozwalają zachować formatowanie w szablonie, dzięki czemu jest ono czyste i deklaratywne. Następnie nauczą się Państwo łączyć pipe i przekazywać im argumenty.
Często zadawane pytania
Czy lekcja „Używanie wbudowanych potoków” jest bezpłatna?
Tak — pełny tekst „Używanie wbudowanych potoków” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Używanie wbudowanych potoków”?
Formatuj daty, liczby i tekst za pomocą potoków. Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Angular Academy?
Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Używanie wbudowanych potoków”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?
Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Używanie wbudowanych potoków
- Łączenie potoków i przekazywanie parametrów
- Tworzenie niestandardowych potoków
- Potoki czyste a nieczyste