Jako, że jest to pierwszy z serii wpisów dotyczących wiązania danych przygotujemy prosty projekt. Bazuje on na jednym z poprzednich wpisów, tym razem jednak użyjemy domyślnego szablonu projektu Angular, który nieznacznie zmodyfikujemy. Jeżeli chcecie zazponać się (ponownie) z koncepcją tworzenia komponentów i ich użycia w aplikacji zapraszam do wpisu: Angular 8: komponenty

W tym wypadku nie będę analizował kodu przygotowanego projektu ponieważ każdy z Was może podejść do tematu w odmienny sposób. Poniżej możecie zobaczyć jak wygląda zarys projektu, który przygotowałem:

Jeżeli jednak chcecie rozpocząć część właściwą wpisu od dokładnie tego samemu stanu jak w moim przypadku możecie pobrać spakowany projekt z poniższego linka: Kliknij tutaj, aby pobrać DataBinding.7z
Ja jednak zachęcam do własnych eksperymentów

Informacja: Projekt, który załączyłem pozbawiony jest niezwykle istotnego (dla nas) folderu node_modules. Dlaczego wspomniałem, że dla nas? Jest to folder w którym znajdują się niezbędne biblioteki dodawane lokalnie do tego folderu w trakcie tworzenia aplikacji. Ten folder jest również pomijany w systemach kontroli wersji.

Niezwykle ważny jest tutaj plik package.json znajdujący się w folderze głównym projektu – określa on jakie biblioteki zostaną zainstalowane w folderze node_modules po uruchomieniu polecenia npm install. Teraz możecie poznać odpowiedź na pytanie dlaczego tworzenie projektu jest takie długie? Wszelkie niezbędne biblioteki muszą zostać zainstalowane lokalnie.
Jeżeli zdecydowaliście się na pobranie projektu musicie wykonać powyższą instrukcję a następnie będziecie gotowi do dalszej pracy.

• Pierwszy krok: przechodzimy do folderu głównego aplikacji i wywołujemy polecenie npm install:
• Drugi krok: ng serve -o - jesteśmy gotowi do pracy.

Wiązanie właściwości to technika jednokierunkowego wiązania danych. Podczas takiego wiązania łączymy właściwość elementu DOM z właściwością zdefiniowaną w kodzie TypeScript naszego komponentu. Przykład takiego wiązania został wspomniany w poprzednim wpisie:

<img [src]="adresURL" />

Przejdźmy do modyfikacji kodu naszego komponentu, tj. pliku property-binding.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-propert-binding',
  templateUrl: './property-binding.component.html',
  styleUrls: ['./property-binding.component.css']
})
export class PropertBindingComponent {
  imageUrl = "https://image.shutterstock.com/z/stock-photo-london-england-audi-rs-avant-performance-estate-car-parked-in-mayfair-ditrict-of-694886881.jpg";
}

<p>Komponent przeznaczony dla: property-binding</p>

<!-- Property Binding -->
<img style="width:100%" [src]="imageUrl" />
<!-- String Interpolation -->
<img style="width:100%" src="{{imageUrl}}" />

Ten sam efekt możemy osiągnąć na dwa odmienne sposoby. Możemy posłużyć się wiązaniem typu Property Binding lub String Interpolation. W takim wypadku preferowane jest jednak użycie pierwszgo sposobu z uwagli na czytelność. Interpolacja ciągów jest używana zwykle do wyświetlania zwykłego tekstu, tj. jako element nagłówka czy paragrafu.

Efekt naszej implementacji (po drobnych zmianach kodu HTML) prezentuje się w poniższy sposób: