Zmienne Szablonowe w Angularze

Zmienne szablonowe (ang. template variables) w Angularze to potężne narzędzie, które pozwala na bezpośredni dostęp do elementów DOM oraz ich właściwości bez potrzeby definiowania dodatkowych zmiennych w komponencie TypeScript. Umożliwiają one interakcję z elementami szablonu, takimi jak pola formularza, przyciski czy komponenty, bezpośrednio w pliku HTML.

Jak działają zmienne szablonowe?

Zmienne szablonowe są tworzone w pliku HTML za pomocą symbolu #, po którym następuje nazwa zmiennej. Można je przypisać do dowolnego elementu w szablonie. Dzięki nim możemy odwoływać się do właściwości i metod tych elementów.

Krok po kroku: Tworzenie i używanie zmiennych szablonowych

Definiowanie zmiennej szablonowej

• Umieść #nazwaZmiennej w znaczniku HTML elementu, do którego chcesz się odwołać.

<input type="text" #myInput />

Użycie zmiennej szablonowej

• Możesz teraz używać myInput w swoim szablonie, aby odwoływać się do elementu <input> i jego właściwości.

<button (click)="logValue(myInput.value)">Wyświetl wartość</button>

Definiowanie metody w komponencie

• W pliku TypeScript komponentu zdefiniuj metodę, która zostanie wywołana.

export class AppComponent {
  logValue(value: string): void {
    console.log(value);
  }
}

Praktyczne zastosowanie

• Dostęp do wartości pól formularza: zmienne szablonowe są często używane do pobierania wartości wprowadzonych przez użytkownika bez potrzeby tworzenia dodatkowych zmiennych w komponencie.
• Odwoływanie się do metod i właściwości elementów: możesz uzyskać dostęp do dowolnych publicznych właściwości i metod elementu.

Ważne uwagi

Zasięg zmiennych szablonowych

Zmienne szablonowe są dostępne tylko w szablonie, w którym zostały zdefiniowane. Nie są dostępne w komponencie TypeScript.

Typy zmiennych szablonowych

Angular automatycznie określa typ zmiennej na podstawie elementu, do którego jest przypisana. Możesz również jawnie określić typ, jeśli korzystasz z komponentów.

Bezpośredni dostęp do DOM

Używając zmiennych szablonowych, masz bezpośredni dostęp do elementów DOM, co może być pomocne, ale należy to robić ostrożnie, aby nie naruszyć zasad Angulara dotyczących bezpiecznego dostępu do DOM.

Przykład: Szablon HTML (app.component.html)

<div class="container container-sm"> 
  <div class="alert alert-primary text-center">
    {{ title }}
  </div>
  <div class="container-fluid">
    <label class="form-label" for="tytulFilmu">Tytuł filmu:</label>
    <input type="text" class="form-control" id="tytulFilmu" #inputTytulFilmu/>
    <button class="btn btn-primary p-2 mt-4" (click)="onClick(inputTytulFilmu.value)">Dodaj</button>
  </div>
  <div class="container-fluid">
  </div>
</div>

Kod TypeScript (app.component.ts)

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'INF.04-03-23.06-SG';

  onClick(tytul: string): void {
    console.log(tytul);
  }
}

Analiza kodu

Definiowanie zmiennej szablonowej

W linii z elementem <input> definiujesz zmienną szablonową inputTytulFilmu:

<input type="text" class="form-control" id="tytulFilmu" #inputTytulFilmu/>

• #inputTytulFilmu – tworzy zmienną szablonową o nazwie inputTytulFilmu, która odnosi się do tego konkretnego elementu <input>.

Użycie zmiennej szablonowej

Następnie używasz tej zmiennej w przycisku:

<button class="btn btn-primary p-2 mt-4" (click)="onClick(inputTytulFilmu.value)">Dodaj</button>

• (click)="onClick(inputTytulFilmu.value)" – podczas kliknięcia przycisku wywoływana jest metoda onClick z komponentu TypeScript, a jako argument przekazywana jest wartość value z pola inputTytulFilmu.

Działanie aplikacji

1. Użytkownik wpisuje tytuł filmu w polu tekstowym.
2. Po kliknięciu przycisku „Dodaj” metoda cnClick zostaje wywołana z wartością wpisaną przez użytkownika.
3. Metoda cnClick wypisuje tę wartość w konsoli (możesz to zobaczyć w narzędziach deweloperskich przeglądarki).

Przykład aplikacji na podstawie arkusza egzaminacyjnego: INF.04-03-23.06-SG

Szablon HTML (app.component.html)

<div class="container">
      <label class="form-label" for="tytulFilmu">Tytuł filmu:</label>
      <input type="text" class="form-control" id="tytulFilmu" #inputTytulFilmu/>
      <label class="form-label mt-4" for="rodzajFilmu">Tytuł filmu:</label>
      <select class="form-select" id="rodzajFilmu" #selectRodzajFilmu>
          <option value="1">Komedia</option>
          <option value="2">Obyczajowy</option>
          <option value="3">Sensacyjny</option>
          <option value="4">Horror</option>
      </select>
      <button class="btn btn-primary p-2 mt-4" 
              (click)="onClick(inputTytulFilmu.value, selectRodzajFilmu.value)">
        Dodaj</button>
</div>

Kod TypeScript (app.component.ts)

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'INF.04-03-23.06-SG';


  onClick(tytulFilmu:string, rodzajFilmu:string):void {
    console.log(`tytuł: ${tytulFilmu}; rodzaj: ${rodzajFilmu}`);
  }
}