Angular- wykorzystanie wbudowanych i deklarowanie własnych pipe-ów

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 2057 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:

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
strony powiązane
  1. angular.io/guide/pipes - dokumentacja dotycząca używania i tworzenia Pipe-ów