Zmienne szablonowe

Zmienne szablonowe w Angularze umożliwiają przechowywanie referencji do elementów DOM oraz instancji dyrektyw wewnątrz szablonu HTML. Są one jednym z kluczowych narzędzi, które zapewniają elastyczność i potężne możliwości manipulacji danych oraz interakcji z elementami interfejsu użytkownika bezpośrednio z poziomu szablonu.

Co to są zmienne szablonowe?

Zmienna szablonowa definiowana jest przez przedrostek # (hasz) i umożliwia odniesienie się do elementu, komponentu, dyrektywy lub innej instancji w szablonie. Może być użyta do przechowywania referencji do elementów formularza, elementów interaktywnych lub nawet całych komponentów, co pozwala na łatwą interakcję i pobieranie danych z szablonu.

Jak używać zmiennych szablonowych?

Zmienne szablonowe mogą być używane do odniesienia się do różnych aspektów aplikacji Angular. Oto kilka przykładów użycia:

1. Referencja do elementu DOM

Możemy użyć zmiennej szablonowej, aby uzyskać dostęp do natywnego elementu DOM i jego właściwości.

<input #myInput type="text" />
<button (click)="logValue(myInput.value)">Loguj wartość</button>

W powyższym przykładzie, zmienna #myInput odnosi się do elementu input. Dzięki temu w metodzie logValue(), wywoływanej po kliknięciu przycisku, możemy bezpośrednio odnieść się do wartości tego inputa.

2. Użycie z dyrektywami

Zmienne szablonowe mogą być używane z dyrektywami Angulara, aby uzyskać dostęp do instancji dyrektywy i jej danych.

<div *ngFor="let item of items; let i = index" #myDiv>
  {{ i }}: {{ item.name }}
</div>

Chociaż w tym przykładzie nie wykorzystujemy bezpośrednio zmiennej #myDiv, demonstruje on, jak można zadeklarować zmienną szablonową w kontekście dyrektywy NgFor.