Angular: Transformacje z użyciem Pipe

Angular 10+

0:00Wiemy już jak rozwiać tekst wiemy jak

0:03modyfikować własności atrybuty elementów HTML oraz wiemy jak obsługiwać różne

0:08zdarzenia użytkownika które pojawiają się u nas w tym drzewie.

0:11Dom to jest nim pójdziemy dalej chciałem

0:13pokazać Tobie jeszcze jedną bardzo ciekawą przydatną funkcjonalnością Guerra.

0:17Są to tzw.

0:18Pipes czyli po polsku Rury te rury są przydatne Pipes są przydatne

0:23kiedy mamy jakiś transformację czy operację wykonujemy w kółko na okrągło

0:28zmieniamy jakoś ten tekst wyświetlany pod jakąś wartość za każdym modyfikuje my co

0:32zamiast wykonywać funkcje tutaj zamiast pisać dodatkowe funkcje gdzieś tam

0:36niepotrzebnie tutaj to możemy użyć tak zwanej rury ta rura.

0:41Jeśli chcemy zrobić tutaj do dużej litery

0:44to możemy oczywiście funkcje wykonać tylko przy każdym generowanie.

0:47Ta funkcja gdzie już czas się wykonywała

0:50zamiast tego mógł użyć tej pionowej takiej kreski rury.

0:55I tutaj podpowiada mi widzisz różne możliwości transformacji transformację

1:00właśnie tych Pipes i powiedzmy chciałbym prace

1:04to mogę po prostu zastosować tutaj upper class i efekt będzie taki sam jak gdybym

1:10użył tutaj funkcji naszej pracy z tym że tutaj nie będzie on za każdym

1:16razem tylko powiększał tylko powiększy to raz.

1:19I dopóki się nie zmieni nie będzie

1:21powiększał on sobie zapamięta ostatnią powiększoną wartość i dopóki dopiero

1:25zmieni coś innego to on każdą nową wartość też będzie odpowiednio sformował.

1:31Co to jest w tych rurach.

1:33Mamy apel pracy powinno być tylko

1:37KS czyli naprzód chcemy tylko pierwszą literę s dłużej.

1:39Czy to jest małe litery są jak

1:42to tutaj znajduje się to z małej litery tu jest powiększone z dużej mogą wszędzie

1:48aplikować takie transformację gdzie wyświetlane tutaj to ciekawe widzisz mogą

1:53już nie tylko w HTML u mnie czy już nie mogę tego użyć w tym miejscu.

1:58Musiałbym cały ten kod przenieść do HTML tutaj

2:03w ten sposób nie użyję więc to działa jakby tylko w HTML u coś ciekawego.

2:07Możemy też takie rury łączyć czyli mogę np.

2:09po róży jest kolejną.

2:11I teraz zmienna którą tu ustawiamy

2:14będzie powiększona do kasę i wynik tego czy powiększony tekst duże

2:19litery możemy przekazać dalej do kolejnego elementu np.

2:23mogę przyjąć tego ten tekst i dać mu długość gdyż parametry

2:27podać czy podług roku podaje długość od powiedzmy 5 do 10 od 5 do 10 znaków.

2:36Czy On doda tutaj dużą liter z przodu.

2:38Obecnie mamy tylko kod piątej czyli do dziesiątej.

2:45Tak odtąd dotąd jedni żebyś mógł już

2:47fragment tekstu przeciąć i wyświetlać tylko fragment tekstu.

2:51Możemy te rury łączyć ze sobą te parametry to tu jeszcze mamy ciekawego.

2:56Powiedzmy że nasz Pan miałby urodziny i urodziny to będzie data.

3:07I tutaj mogę podać datę np.

3:08w ten sposób abym mógł wpisać całkowicie ręcznie.

3:11Powiedzmy że jak jest dość.

3:15Już wiekowy to jest data powiedzmy systemu.

3:20W ten sposób Zobaczymy jeśli te daty się tu po prostu w ten

3:23sposób to ona nie będzie zbyt ciekawie wyglądała.

3:26Czyli powiedzmy gdzieś tutaj siedzę akapit Luthera data.

3:34Jeśli w ten sposób spróbuję to zrobić to

3:36data się wyświetli po prostu jako zwykły tekst zobaczymy zapisze te

3:40zapisze to i jak widzisz nie jest to zbyt fajny format.

3:46Jeśli zapisujemy na tym transformację datę.

3:53Zobaczmy jak to wygląda dużo lepiej.

3:57Możemy też różne opcje podać przy czym dacie.

4:00Tu mamy wartość format strefę czasową i

4:04jeszcze w jaki język chcemy ułożyć w jakim języku chcemy te dane powiedzmy

4:08dni tygodnia ustawić i teraz ja nie będę wchodził w szczegóły tego gdybyś

4:12interesowały wszystkie papiery to formularz dokumentacji API.

4:21Tu mamy listę wszystkich plików jeśli będziemy któreś PP np.

4:25datę płytę możemy zobaczyć jak są dostępne

4:27opcje czyli wartość jest zawsze tym co to jest przed pionową kreską.

4:31Format jest to pierwszy parametr i po

4:33dwóch grupach możemy podawać dodatkowe parametry.

4:36Tutaj funkcja format daty formatu date i mogę np.

4:39wybrać sobie któryś z formatów gotowych

4:41albo całkowicie użyć tutaj symboli żeby stworzyć własny format daty.

4:46W ten sposób czy możemy w ten sposób datę po prostu możemy podać dane medium.

4:51Możemy podać też tylko w ten sposób

4:53konkretne symbole które pokażą nam tylko konkrety np.

4:56dzień godzinę rok itd.

4:59Czyli mogę np.

5:00zrobić tutaj short time medium chcielibyśmy powiedzmy samą datę.

5:07Short date.

5:09Milion lat mi zrobić jeśli podam to jako parametr Short date możemy tak to zrobić.

5:16To też może być zmienna czyli np.

5:18mogę powiedzieć to jest data format i teraz jeśli zmienię wartość tego

5:25parametru teraz krypcie to on też zmieni format daty czy może np.

5:29zmienić sobie format daty.

5:32W ten sposób mamy krótką datę. OK.

5:37Co też ciekawego bardzo przydatną rzeczą.

5:39Tu najpierw troszkę tam jest tak bardzo przydatną jest jeszcze Jackson

5:43powiedzmy chciał zobaczyć co się kryje w tym użytkowniku.

5:46Mógł tutaj gdzieś dodać konsolę.

5:48Jasne ale budowanie tego jest dość niewygodne.

5:53Chciałem to podejrzeć działa skrycie.

5:55No to mogłem zrobić coś takiego po prostu pokaż mi co się kryje w obiekcie juz.

6:00Jeśli tak to zrobię w ten sposób to

6:02spróbuję koncertować ten obiekt nam do string.

6:05I mamy taki brzydki obiekt obiekt.

6:09Co może z tym zrobić.

6:10Mógłbym tutaj robić jakiś Jackson stringi fajne jak pamiętasz.

6:15Nie mogę już być globalnych obiektów nie mam tutaj obiektu Window mamy tylko to co

6:19tu już jest w specjalnej funkcji która zamienić na Jackson.

6:23Mam tutaj specjalny pipe.

6:27Czasem tak tymczasem możemy zobaczyć nie ma żadnych parametrów ma tylko wartość.

6:36Kim mamy lepiej jest Jackson.

6:39Jeśli go zobaczę w środku to im że jest ładnie sformowany.

6:43Jak wiesz HTML usuwa jakby ignoruje Space

6:46i wszystkie białe znaki więc tego formatu nie widzimy.

6:50Chyba że jeszcze jeszcze w takim elemencie jak element reformator.

6:55Jeśli to będzie w parlamencie reformator i przepuszcza to przed sąd mamy bardzo

7:01fajny mechanizm który może używać sobie za każdym razem gdy chcesz podejrzeć co

7:05się kryje tutaj w takim obiekcie tak uwaga tylko żeby do tego obiektu nie

7:10zamontować czegoś co jest zbyt skomplikowane np.

7:14ekstra dokument.

7:16Całe to to nie zadziała za dobrze.

7:19Aczkolwiek jest to bardzo fajny mechanizm

7:22że mógł sobie tutaj bezpiecznie w HTML u wyświetlić obiekt zobaczyć go.

7:25No i co najważniejsze on jest na bieżąco odświeżony czyli skażony.

7:30Mogę zobaczyć jak się ten obiekt zmienia w środku mamy pełną datę

7:35tu mamy datę sformowano tu mamy tekst z dużej litery itd.

7:39Czyli przepisy pozwalają w prosty sposób

7:42sobie przybrać transformację którą możesz w każdej chwili użyć w HTML u i nie śmieci

7:47my nie musimy tworzyć dodatkowych jakichś pomocniczych funkcji w JavaScript czy.