Zdarzenia ( ) i zmienne szablonowe #

Czego się dziś nauczysz

Przygotowanie: lekcje 05–07 — umiesz pokazać dane i przekazać wartość do właściwości. Przewidywany czas: 45 min z zadaniami.

Ekran odpowiada użytkownikowi

Wiązanie [ ] prowadzi dane z klasy do szablonu. Zdarzenia prowadzą je w przeciwną stronę: użytkownik coś robi, a klasa się o tym dowiaduje. Zapamiętaj tę symetrię: nawias kwadratowy to wejście do elementu, nawias okrągły to wyjście z niego. Dwukierunkowe [(ngModel)] z lekcji 17 to po prostu oba naraz.

<button (click)="zapisz()">Zapisz</button>
<!--     ↑ zdarzenie   ↑ co zrobić — wywołanie metody z klasy -->

W nawiasach okrągłych stoi nazwa zdarzenia bez przedrostka on (w czystym HTML-u byłoby onclick). W cudzysłowie — zwykle wywołanie metody, z nawiasami. Po każdym obsłużonym zdarzeniu Angular sam odświeża szablon, więc nowa wartość pola od razu pojawia się na ekranie.

Skąd wziąć wpisany tekst: $event i #zmienna

$event

Nazwa $event oznacza obiekt opisujący zdarzenie. Przy kliknięciu rzadko jest potrzebny, przy polu tekstowym — prawie zawsze, bo przez $event.target dochodzisz do pola i jego wartości.

Zmienna szablonowa #nazwa

Zapis #pole przy elemencie HTML nadaje mu nazwę, przez którą sięgasz do niego w tym samym szablonie: do wartości (pole.value), do metody ustawiającej kursor (pole.focus()). To najprostsza droga, gdy potrzebujesz wartości jednego pola w chwili kliknięcia — bez budowania całego formularza.

<input #pole class="form-control">
<button (click)="pokaz(pole.value)">Pokaż</button>
<!-- pole.value — tekst wpisany w polu w chwili kliknięcia -->

Zmienna szablonowa żyje tylko w szablonie — w klasie jej nie ma. Do klasy trafia tylko to, co przekażesz jako argument metody.

Pierwsze kliknięcie

Nawias okrągły przy nazwie zdarzenia, a w cudzysłowie — co ma się wtedy stać. Pole wiadomosc nie jest readonly, bo metoda je zmienia.

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

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    wiadomosc = 'Jeszcze nic nie kliknięto.';

    zapisz(): void {
        this.wiadomosc = 'Dziękujemy za zapis!';
    }
}

<div class="p-3">
  <button class="btn btn-primary" (click)="zapisz()">Zapisz się</button>
  <p class="mt-3">{{ wiadomosc }}</p>
</div>

przed kliknięciem:  Jeszcze nic nie kliknięto.
po kliknięciu:      Dziękujemy za zapis!

Metoda nazywa się zapisz, a w szablonie piszemy zapisz() — z nawiasami, bo chcemy ją wywołać.

Metoda z argumentem

Jedna metoda obsługuje trzy przyciski, bo w argumencie dostaje informację, który to był.

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

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    wybrane = '';

    wybierz(nazwa: string): void {
        this.wybrane = nazwa;
    }
}

<div class="p-3">
  <button class="btn btn-outline-primary me-2" (click)="wybierz('Turniej retro')">Turniej retro</button>
  <button class="btn btn-outline-primary me-2" (click)="wybierz('Noc robotów')">Noc robotów</button>
  <button class="btn btn-outline-primary" (click)="wybierz('Druk 3D')">Druk 3D</button>
  <p class="mt-3">Wybrano: {{ wybrane }}</p>
</div>

Wybrano: Noc robotów

Tekst w apostrofach to zwykły argument — taki sam, jaki przekazałbyś w TypeScripcie. Apostrofy, bo cały atrybut stoi już w cudzysłowie.

$event — tekst wpisywany na bieżąco

Zdarzenie (input) zachodzi po każdej zmianie zawartości pola. Metoda dostaje obiekt zdarzenia i wyciąga z niego wpisany tekst.

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

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    tekst = '';
    znakow = 0;

    przepisz(zdarzenie: Event): void {
        const pole = zdarzenie.target as HTMLInputElement;
        this.tekst = pole.value;
        this.znakow = pole.value.length;
    }
}

<div class="p-3">
  <input class="form-control" style="width: 22rem"
         placeholder="Nazwa wydarzenia" (input)="przepisz($event)">
  <p class="mt-2">Wpisano: {{ tekst }} ({{ znakow }} znaków)</p>
</div>

Wpisano: Turniej (7 znaków)

zdarzenie.target to element, który wywołał zdarzenie. TypeScript nie wie, że to pole tekstowe, więc mówimy mu to zapisem as HTMLInputElement — dopiero wtedy wolno odczytać .value. Klasa form-control to pole tekstowe w stylu Bootstrapa.

Zmienna szablonowa i klawisz Enter

Pole ma nazwę #pole. Przycisk i klawisz Enter przekazują jego wartość do metody, a potem czyszczą pole. Drugi przycisk ustawia kursor w polu, nie dotykając klasy.

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

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    lista: string[] = [];
    komunikat = '';

    dodaj(nazwa: string): void {
        const czysta = nazwa.trim();
        if (czysta.length === 0) {
            this.komunikat = 'Wpisz nazwę wydarzenia.';
            return;
        }
        this.lista = [...this.lista, czysta];
        this.komunikat = 'Dodano: ' + czysta;
    }
}

<div class="p-3" style="width: 26rem">
  <input #pole class="form-control mb-2" placeholder="Nazwa wydarzenia"
         (keyup.enter)="dodaj(pole.value); pole.value = ''">
  <button class="btn btn-primary me-2" (click)="dodaj(pole.value); pole.value = ''; pole.focus()">Dodaj</button>
  <button class="btn btn-outline-secondary" (click)="pole.focus()">Kursor do pola</button>
  <p class="mt-3 mb-1">{{ komunikat }}</p>
  <p class="text-muted">Pozycji: {{ lista.length }} — {{ lista.join(', ') }}</p>
</div>

Wpisz nazwę wydarzenia.
Pozycji: 2 — Turniej retro, Noc robotów

W obsłudze zdarzenia stoją trzy instrukcje oddzielone średnikiem: wywołanie metody, wyczyszczenie pola i ustawienie kursora. Decyzja (czy nazwa nie jest pusta) jest w klasie. trim() obcina spacje z początku i końca, więc same spacje też liczą się jako pusta nazwa. Nową pozycję dokładamy, tworząc nową tablicę [...this.lista, czysta] — dlaczego tak, wyjaśni się w lekcji 10.

Zestawienie elementów

Zanim utkniesz

Zadania

Co trzeba zapamiętać

• (zdarzenie)="metoda()" — nawiasy okrągłe przy zdarzeniu i wywołanie metody z nawiasami.
• Po obsłużonym zdarzeniu Angular sam odświeża ekran.
• Metodzie można przekazać własny argument albo $event.
• (input) reaguje na każdą literę, (change) dopiero po wyjściu z pola, (keyup.enter) — na Enter.
• #pole daje dostęp do elementu w szablonie: pole.value, pole.focus().
• Zmienna szablonowa nie istnieje w klasie — wartość przekazujesz argumentem.
• Warunki i obliczenia należą do klasy, nie do szablonu.

Sprawdź się: masz pole tekstowe i chcesz reagować na każdą literę. Które zdarzenie wybierzesz i co musisz przekazać metodzie? A jeśli wystarczy Ci wartość w chwili kliknięcia przycisku obok?

Dokumentacja: angular.dev — obsługa zdarzeń.