Czym jest sygnał

Czego się dziś nauczysz

Przygotowanie: lekcje 05–08 — umiesz pokazać dane w szablonie i obsłużyć kliknięcie. Przewidywany czas: 2 × 45 min z zadaniami.

Skąd Angular wie, co przerysować

W lekcji 08 zmieniałeś zwykłe pola klasy i ekran od razu się odświeżał. To zasługa zdarzenia: po każdym (click), (input) czy (keyup.enter) z szablonu Angular przerysowuje komponent — na wszelki wypadek.

Nie każda zmiana zaczyna się jednak od kliknięcia. Stoper tyka co sekundę. Odpowiedź z serwera przychodzi po chwili. Wtedy nikt nie mówi Angularowi: „ta liczba się zmieniła, odśwież ją”. Wartość leży w pamięci, a ekran pokazuje stary stan.

Angular rozwiązuje to sygnałami. Sygnał to wartość, która przy każdej zmianie sama zgłasza: „byłem użyty w tym miejscu szablonu, odśwież je”. Dlatego od tej lekcji każdą daną, która się zmienia i jest pokazywana na ekranie, trzymamy w sygnale — niezależnie od tego, czy zmienia ją kliknięcie, stoper czy serwer.

Sygnał w trzech krokach

readonly przy sygnale oznacza, że nie podmienisz samego sygnału na inny. Wartość w środku zmieniasz do woli przez set.

setInterval i clearInterval

Do stopera potrzebujesz funkcji, która wykonuje kod co jakiś czas. setInterval(() => { … }, 1000) uruchamia kod w klamrach co 1000 milisekund i zwraca numer stopera. Ten numer przekazany do clearInterval(numer) zatrzymuje stoper. Zapis () => { … } to funkcja strzałkowa znana z TypeScriptu.

Stoper na zwykłym polu — i zaskoczenie

Liczymy sekundy w zwykłym polu. Drugi przycisk, Pokaż, wywołuje pustą metodę: niczego nie zmienia, tylko jest kliknięciem.

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

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

    start(): void {
        if (this.dziala) {
            return;                       // drugi stoper nie jest potrzebny
        }
        this.dziala = true;
        setInterval(() => {
            this.sekundy = this.sekundy + 1;
            console.log('w klasie sekundy =', this.sekundy);
        }, 1000);
    }

    pokaz(): void {
        // celowo pusta: samo kliknięcie wystarczy, żeby Angular przerysował ekran
    }
}

<div class="p-3">
  <button class="btn btn-primary me-2" (click)="start()">Start</button>
  <button class="btn btn-outline-secondary" (click)="pokaz()">Pokaż</button>
  <p class="mt-3 fs-4">Stoper: {{ sekundy }} s</p>
</div>

po kliknięciu Start i 3 sekundach:  Stoper: 0 s   (konsola F12: 1, 2, 3)
po kliknięciu Pokaż:                Stoper: 3 s   i znowu stoi

Otwórz konsolę przeglądarki (F12) i kliknij Start. W konsoli co sekundę pojawia się kolejna liczba — pole naprawdę rośnie. Na ekranie nadal jest 0 s. Kliknij Pokaż: liczba skacze do aktualnej wartości i znowu staje. fs-4 to klasa Bootstrapa powiększająca tekst.

Ten sam stoper na sygnale

Zmieniamy dokładnie trzy rzeczy: sposób zapisania pola, sposób zmiany wartości i odczyt w szablonie. Przycisk Pokaż nie jest już potrzebny.

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

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly sekundy = signal(0);
    dziala = false;

    start(): void {
        if (this.dziala) {
            return;
        }
        this.dziala = true;
        setInterval(() => {
            this.sekundy.set(this.sekundy() + 1);
        }, 1000);
    }
}

<div class="p-3">
  <button class="btn btn-primary" (click)="start()">Start</button>
  <p class="mt-3 fs-4">Stoper: {{ sekundy() }} s</p>
</div>

Stoper: 1 s … 2 s … 3 s …   (co sekundę, bez klikania)

Porównaj oba pliki demo.ts — różnią się trzema miejscami: signal(0), .set(this.sekundy() + 1) i nawiasy przy odczycie w szablonie. W imporcie doszło słowo signal.

Odczyt sygnału — z nawiasami i bez

Najczęstszy błąd początkującego. Zobaczmy, co się dzieje, gdy nawiasów zabraknie.

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

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly punkty = signal(42);
    readonly nazwa = signal('Turniej retro');
}

<div class="p-3">
  <ul class="list-group" style="width: 26rem">
    <li class="list-group-item">Poprawnie: {{ punkty() }}</li>
    <li class="list-group-item">Bez nawiasów: {{ punkty }}</li>
    <li class="list-group-item">Tekst: {{ nazwa() }}</li>
    <li class="list-group-item">Obliczenie: {{ punkty() * 2 }}</li>
  </ul>
</div>

Poprawnie: 42
Bez nawiasów: [Signal (punkty): 42]
Tekst: Turniej retro
Obliczenie: 84

▲ [WARNING] NG8109: punkty is a function and should be invoked: punkty()
▲ [WARNING] NG8117: Function in text interpolation should be invoked: punkty()

Drugi wiersz pokazuje opis samego sygnału zamiast wartości. Strona działa dalej, bo to tylko ostrzeżenia — a Angular podpowiada nawet, co dopisać.

Sygnał nie musi trzymać liczby

W sygnale może być tekst, wartość logiczna albo cały obiekt. Zasada odczytu jest zawsze ta sama.

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

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly nazwa = signal('Turniej retro');
    readonly zapisany = signal(false);
    readonly wydarzenie = signal({ tytul: 'Noc robotów', sala: 12 });

    zapisz(): void {
        this.zapisany.set(true);
    }

    zmienNazwe(): void {
        this.nazwa.set('Warsztat druku 3D');
    }
}

<div class="card m-3 p-3" style="width: 24rem">
  <h5>{{ nazwa() }}</h5>
  <p>Zapisany: {{ zapisany() }}</p>
  <p>{{ wydarzenie().tytul }}, sala {{ wydarzenie().sala }}</p>
  <button class="btn btn-primary" (click)="zapisz()">Zapisz się</button>
  <button class="btn btn-outline-secondary mt-2" (click)="zmienNazwe()">Zmień nazwę</button>
</div>

Warsztat druku 3D
Zapisany: true
Noc robotów, sala 12

Zwróć uwagę na wydarzenie().tytul — najpierw wyjmujesz obiekt z sygnału (nawiasy), dopiero potem sięgasz po jego pole (kropka).

Zestawienie elementów

Zanim utkniesz

Zadania

Co trzeba zapamiętać

• Zwykłe pole odświeża się na ekranie tylko przy okazji zdarzenia z szablonu; zmiana ze stopera zostaje niewidoczna.
• signal(wartość) tworzy sygnał; wartość początkowa jest obowiązkowa.
• Odczyt zawsze z nawiasami: licznik(), w klasie this.licznik(), w obiekcie dane().pole.
• set ustawia nową wartość i odświeża wszystkie miejsca, które z niej korzystają — niezależnie od tego, kto ją zmienił.
• Odczyt bez nawiasów daje napis [Signal …] i ostrzeżenie NG8109.
• Dane, które się zmieniają i są na ekranie, trzymamy w sygnałach.
• setInterval zwraca numer stopera, który zatrzymuje clearInterval.

Sprawdź się: kolega mówi: „u mnie zwykłe pole działa, po co mi sygnał?”. Jakim jednym przykładem pokażesz mu, że się myli?

Dokumentacja: angular.dev — sygnały.