Data binding jest podstawową koncepcją Angulara a używana jest do definiowania komunikacji pomiędzy komponentem a drzewem DOM. Pozwala na łączenie danych z widokiem. Podejście takie pozwala na tworzenie interaktywnych aplikacji w których nie musimy martwić się o dane - pochodzące z warstwy logiki biznesowej oraz zaktualizowane/wprowadzone przez użytkownika.
Wyróżniamy wiązania jedno oraz dwukierunkowe.
W pierwszym przypadku dochodzi do zmiany szablonu HTML pod wpływem zmian wprowadzonych w TypeScript. Prostym przykładem takiego wiązania może być dashboard aplikacji. W ramach widoku przedstawiamy użytkownikowi podsumowanie działania systemu, np. liczba niezrealizowanych transkacji, liczba nowych użytkowników oraz raporty oczekujące na wygenerowanie (załóżmy, że dane odnoszą się do ostatnich 24 godzin). Użytkownik może jednak zaznaczyć inny przedział czasu, np. 7 dni. Wówczas dochodzi do wygenerowania żądania do API, informacje zostają przetworzone i zwrócone w postaci tej samej struktury ale z innymi danymi – zostaną one odpowiednio wyświetlone na przygotowanym widoku.
Drugim typem wiązania jest wiązanie dwukierunkowe. W takim wypadku zachodzi automatyczna synchronizacja danych pomiędzy modelem a widokiem. Jakakolwiek zmiana znajduje odzwierciedlenie w obu komponentach (model oraz widok). Z takim przykładem spotkaliśmy się w poprzednim wpisie. Użytkownik miał do wyboru listę rozwijalną z kilkoma samochodami. Domyślnie zaznaczony był pierwszy element na liście (tak przygotowaliśmy nasz model). Jednakże każda zmiana zaznaczania wpływała na wartość parametru zdefiniowanego w modelu a to wywoływało również zmianę szablonu HTML.
Angular oferuje cztery różne typy wiązań, które różnią się sposobem przepływu danych. Zaliczamy do nich:
String Interpolation;
Property Binding;
Event Binding;
Two-way binding.
Zagadnienia te są niezwykle istotne. W tej części omówimy je bardzo pobieżnie – następnie informacje na tematch każdego z nich zostaną rozwinięte w kolejnych artykułach.
String Interpolation
Pierwszy z nich to przykład jednokierunkowej techniki wiązania danych, która jest używana do wprowadzania danych z kodu TypeScript do szablonu (widoku). W takim wypadku używamy podwójnych nawiasów klamrowych. Prostym przykładem mogą być widoki typu read-only - potrzebujemy wyświetlić różne informacje przy czym użytkownik nie będzie w stanie wprowadzać żadnych modyfikacji.
Wiązanie właściwości jest również przykładem wiązania jednokierunkowego. Pozwala na połączenie właściwości elementu DOM z polem, które jest właściwością w naszym kodzie TypeScript. Prostym przykładem jest ustawianie ścieżki do obrazka, która jest pobrana przez zewnętrzne żądanie, np:
<img [src]="adresURL" />
Kolejny przykładem może być ustawienie adresu email w poniższej postaci:
<input type="email" [value]="user.email" />
Event Binding
W tym wypadku odnosimy się do obsługi zdarzeń wywoływanych z elementu drzewa DOM. Mogą to być wszelkie zdarzenia takie jak kliknięcie przycisku, poruszenie kursora myszy czy zmiana wartości wyświetlanej w polu tekstowym. W poniższym przykładzie wywołujemy metodę pozwalającą na zakup samochodu:
<button (click)="buyCar()"></button>
Two-way binding
Wiązania jednokierunkowe nie pozwalają na odzwierciedlenie zmian po stronie kodu TypeScript. Rozwiązaniem jest wiązanie dwukierunkowe, które ten problem eliminuje. W poprzednim wpisie skorzystaliśmy z tego podejścia – pamiętajcie, że wymaga od nas dodania pakietu, który implementuje tę funkcjonalność. Więcej informacji możecie znaleźć w poprzednim wpisie: Angular 8: dyrektywa ngSwitch.
Jeszcze raz, dla przypomnienia, składnia:
[(ngModel)] = "[właściwość_z_naszego_komponentu]"
Podsumowanie
Przejdziemy teraz do 4 osobnych wpisów, które skupią się na każdym z wiązań. Ponownie utworzymy nowy projekt, dodamy komponenty (odpowiadające różnym typom wiązań) oraz będiemy dodawać odpowiedni kod w zależności od poruszanego zagadnienia.
