Czym jest pipe w Angularze?

Czasami masz do czynienia z surowymi danymi, których nie możesz od tak wyświetlić użytkownikowi. Musisz przekształcić je na pożądany format, który będzie atrakcyjny dla odbiorcy. Do tego w Angularze służy pipe, a tutaj dowiesz się, czym dokładnie on jest.

Czym jest pipe?

Pipe w łatwy sposób pozwala zmienić format danych. Używa się go do zmiennych znajdujących się w komponencie, kiedy nie wyświetlają się one tak, jakbyśmy tego chcieli. Przykładowo, gdzieś na stronie chcemy przedstawić liczbę w procentach, ale przechowujemy ją w postaci ułamkowej. Albo potrzebujemy dostosować format daty, tak aby w tym miejscu wyświetlał się dzień – miesiąc – rok, a inaczej w innym miejscu. Pipe pozwoli nam to zrobić bez większego wysiłku.

Pipe, z angielskiego to rura, ale po polsku mówi się na to potok. Chociaż, w zasadzie się nie mówi, bo używa się zwrotu angielskiego. Sam nie wiem, czy bym ogarnął, gdyby ktoś powiedział potok. Można wyobrazić sobie, że coś do tej rury wchodzi i na końcu wychodzi, ale zupełnie zmienione, nie do poznania. Totalna metamorfoza, jak przekształcenie gąsienicy w motyla. Tak można zobrazować działanie tego mechanizmu.

Wywołanie odbywa się w template, czyli w htmlu. Ma on swoją łatwo rozpoznawalną składnię, w której przekazujesz zmienną wraz z nazwą pipe’a oraz opcjonalnie parametrem. Całość odbywa się przez znak | i nawiązuje do pipe’ów z systemów Linux. Nie musisz ich znać, bo sam mechanizm jest bardzo prosty. Wystarczy spojrzeć na przykład.

Pipe można stworzyć własny lub skorzystać z tych już wbudowanych. Tutaj skupię się na tych popularnych, które w łatwy sposób pokażą, jak to wszystko działa i szkoda by było ich nie używać. Do tworzenia nowych pipów zrobię dedykowany artykuł. Czas na przykład.

Przykład – procenty

W komponencie masz liczbę dziesiętną, którą chcesz wyświetlić w postaci procentów. Za pomocą pipe’ów zrobisz to w prosty sposób. Kod HTML:

<div>
    {{ value | percent }}
</div>

Kod ts:

import { PercentPipe } from "@angular/common";
import { Component } from "@angular/core";
@Component({
    selector: "app-pipe",
    templateUrl: "pipe-example.component.html",
    standalone: true,
    imports: [PercentPipe]
})
export class PipeExampleComponent {
    value: number = 0.25;
}

Cała idea pipów to jedna linijka, jego wywołanie w HTMLu. Zmienną value i tak byś wyświetlił, bo chcesz ją pokazać użytkownikowi, a tutaj dopisujesz, który pipe ma ją przetworzyć. Drugą potrzebną rzeczą, żeby całość zadziałała, jest zaimportowanie go do komponentu – w tym przypadku do imports należy dodać PercentPipe. To tyle.

Możesz oczywiście zdecydować, że nie będziesz korzystał z pipów. Da się to zrobić równie łatwo:

<div>
    {{ value }}%
</div>

Przykład jest na tyle prosty, że nic by się nie stało, jakbyś wybrał drugi sposób. Tutaj jednak, zmienna value powinna być ręcznie przemnożona przez 100. Subiektywnie uważam, że pipe wygrywa, bo:

Wyrażenie intencji w kodzie poprzez słowo percent jest bardziej znaczące niż przez znak %.
Podczas potrzeby zmiany łatwiej przeoczyć znak i przypadkowo go pominąć.
Znaki }}% jakoś tak dziwnie wygląda, a samej spacji dodać nie możesz, bo doda się odstęp przy wyświetlaniu i zamiast 25% będzie 25 %.
Formatem procentów można sterować za pomocą parametrów dostępnych dla tego pipe. Parametrami zajmę się w drugim przykładzie.

Przykład – format daty oraz łańcuch wywołań

Z datami jest nieco inaczej, bo otrzymujesz je często w nieludzkich formatach. Zwyczajne wyświetlenie zmiennej z datą pokaże nam “Wed Feb 28 2024 00:00:00 GMT+0100 (czas środkowoeuropejski standardowy)”. Trochę to za długie, jak zwykle potrzebujemy wyświetlić tylko dzień, miesiąc i rok. W Angularze wystarczy użyć dedykowanego pipe do dat:

<div>
    {{ value | date:"dd MM yyyy"}}
</div>

Kod ts:

import { DatePipe } from "@angular/common";
import { Component } from "@angular/core";
@Component({
    selector:"app-date-pipe",
    templateUrl: "./pipe-date-example.component.html",
    standalone: true, 
    imports: [DatePipe]
})
export class DatePipeExample {
    value: Date = new Date(2024, 1, 28);
}

Sama plik ts nie różni się niczym, poza zmienną, która musi być datą, oraz zaimportowaniem pipe’ów do dat – czyli DatePipe. W HTMLu jest już nieco inaczej, bo dochodzi parametr. Samą datę można wyświetlić na wiele sposobów i należy mieć mechanizm, który określi, jaki format chcemy. Gdy klient zażąda innego, w łatwy sposób go zmienimy, poprzez edytowanie parametru.

W metodach parametry rozdzielane są po przecinku i znajdują się w nawiasach. W pipach jest inaczej, ponieważ kolejne parametry rozdzielane są przez znak dwukropka. Parametrów może być wiele, i chociażby DatePipe może wyglądać tak:

<div>
    {{ value | date:"dd MM yyyy":"UTC":"en-US" }}
</div>

Pipe można nakładać na siebie. Chcąc wyświetlić słownie miesiąc, co można uzyskać przez DatePipe, dodatkowo chcielibyśmy, żeby zawsze wyświetlały się wielkimi literami, korzystając z UpperCasePipe, które musisz również dodać do imports.

<div>
    {{ value | date:"MMMM" | uppercase }}
</div>

Zastosowania pipe

Jakby się uprzeć, to wcale nie musisz korzystać z pipów. Przecież, zawsze możesz utworzyć dedykowaną metodę w komponencie i to ją wyświetlać. Oto, co jednak przemawia za używaniem pipów:

Jest to tak znany mechanizm w Angularze, że trudno było by go nie spotkać.
Łatwy sposób przetwarzania danych na widoku w html. Nie potrzebujesz modyfikowania komponentu, tylko jego szablon.
Pipe jest reużywalny, czyli dostępny dla wielu komponentów. Metoda w komponencie tylko do jednego.
Jak zaznaczyłem w przykładzie z procentami wyrażasz słownie intencje, zatem stosowanie pipów jest czytelne. Metody bywają nazwane formatted i po nazwie za nic w świcie nie wiadomo w jaki sposób. Dodatkowo, przy chęci zmiany tego formated musisz uważać, czy inne elementy, których też korzystają z tej metody nie powinny pozostać takie same.
Pipe możesz wywoływać jeden za drugim, jak w przykładzie z miesiącem wyświetlonym wielkimi literami.
Lepsza wydajność pipów, które będą wywoływane jedynie przy zmianie wartości. O tym zrobie odzielny artykuł, w którym poruszę temat pure i impure pipów.

Podsumowanie

Pipe to jeden z podstawowych elementów stosowanych w Angularze. Jest powszechnie używany i należy go znać podczas pracy z tą technologią. Służy do podstawowych przekształceń zmiennych, tak aby wyświetlić je w formacie, który chcemy pokazać użytkownikowi. Zaznaczę, jeszcze raz – zmiennych. Przy chęci zmiany stylów, dodatkowych elementów lub struktury HTML pipów się nie używa – wtedy lepiej stworzyć komponent.

Istnieje wiele wbudowanych pipe’ów, ale można też stworzyć swoje własne – o tym będzie oddzielny artykuł. Samo użycie odbywa się w HTMLu, więc jest częścią widoku. Pipe można używać też do observable, wtedy jest to async pipe, któremu też należy się dedykowany artykuł. Również złożone obiekty, takie jak klasy lub tablice mogą być przekazywane do pipów. Jednak to temat, który zasługuje na kolejny materiał omawiający pure i impure pipe. Jeżeli jesteś zainteresowany tymi tematami, to śledź mojego bloga, lub poczytaj o tych tematach na własną rękę.

Czego się dowiedziałeś?

Wiesz czym są pipe i rozpoznajesz, gdzie zostały użyte.
Umiesz przekształcić daną na pożądany format w samym template.
Umiesz uzyć wbudowanego pipe’a.
Wiesz, że pipe mogą mieć swoje parametry.
Wiesz, dlaczego pipe warto używać.
Umiesz przekształcić liczbę na format procentów.
Umiesz przekształcać format daty.
Wiesz, że można wywołać kilka pipów jeden za drugim.