Stronę tą wyświetlono już: 2112 razy

Wstęp

Pipe to element, który umożliwia w kodzie HTML filtrować dane wejściowe tak, aby wyświetlały się w odpowiednim formacie. Są więc wbudowane pipe-y, które zamieniają tekst na pisany dużymi literami. Oczywiście istnieje również możliwość tworzenia własnych pipe-ów. Ułatwienie jakie niesie za sobą korzystanie z pipe-ów nie jest jedynym powodem, dla którego warto z nich korzystać. Okazuje się bowiem, że Angular optymalizuje zadania związane z odświeżaniem widoku, co w znacznym stopniu ułatwia renderowanie widoku.

Przykłady wbudowanych pipe-ów

Angular ma swoje własne już zadeklarowane pipe-y, do których należą między innymi:

• uppercase - zamienia tekst pisany małymi literami na pisany dużymi:

  <p>{{ title | uppercase }}</p>

• lowercase - zamienia tekst pisany dużymi literami na pisany małymi:

  <p>{{ title | lowercase }}</p>

• number - formatuje zmienne numeryczne, oto seria przykładów zaczerpniętych prosto z dokumentacji:

  <!--output '2.718'--> <p>e (no formatting): {{e | number}}</p> <!--output '002.71828'--> <p>e (3.1-5): {{e | number:'3.1-5'}}</p> <!--output '0,002.71828'--> <p>e (4.5-5): {{e | number:'4.5-5'}}</p> <!--output '0 002,71828'--> <p>e (french): {{e | number:'4.5-5':'fr'}}</p> <!--output '3.14'--> <p>pi (no formatting): {{pi | number}}</p> <!--output '003.14'--> <p>pi (3.1-5): {{pi | number:'3.1-5'}}</p> <!--output '003.14000'--> <p>pi (3.5-5): {{pi | number:'3.5-5'}}</p> <!--output '-3' / unlike '-2' by Math.round()--> <p>-2.5 (1.0-0): {{-2.5 | number:'1.0-0'}}</p>
• date - formatowanie zmiennych typu Date, przechowujących datę. Oto seria przykładów zaczerpniętych prosto z dokumentacji:
  {{ dateObj | date }} // output is 'Jun 15, 2015' {{ dateObj | date:'medium' }} // output is 'Jun 15, 2015, 9:43:11 PM' {{ dateObj | date:'shortTime' }} // output is '9:43 PM' {{ dateObj | date:'mm:ss' }} // output is '43:11'

Tworzenie własnych pipe-ów

Istnieje możliwość napisania własnego pipe-a, który może przyjmować dowolną liczbę argumentów. Oto przykład, który mówi więcej aniżeli tysiąc słów:

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'suffixAndPreffix' }) export class SuffixAndPreffixPipe implements PipeTransform { transform(value: any, suffix: string, prefix: string): any { return `${suffix} ${value} ${prefix}`; } }

Przykład użycia:

<!-- Wynik: Cena 100 zł --> <p> {{ price | suffixAndPreffix : 'Cena: ': ' zł' }} </p>

Pipe-y można nakładać na siebie:

<!-- Wynik: Cena 100.00 zł --> <p>{{ price | number: '1.2-2' | suffixAndPreffix: 'Cena: ': ' zł' }}</p>

Strony powiązane

angular.io/guide/pipes - dokumentacja dotycząca używania i tworzenia Pipe-ów