Interpolacja {{ }} — dane z klasy na ekranie

Czego się dziś nauczysz

Przygotowanie: lekcje 01–04 — masz projekt z Bootstrapem i umiesz uruchomić przykład przez komponent Demo. Przewidywany czas: 45 min z zadaniami.

Skąd szablon bierze dane

Do tej pory wpisywałeś teksty wprost w HTML. Działa, dopóki nic się nie zmienia. Ale nazwa wydarzenia, liczba wolnych miejsc czy cena biletu będą się zmieniać — i nie chcesz przy każdej zmianie szukać ich w dziesięciu miejscach szablonu.

Dlatego dane trzymamy w klasie komponentu, a w szablonie zostawiamy tylko miejsce, w które Angular je wstawi. To miejsce oznaczamy podwójnymi klamrami — to interpolacja.

<p>Tekst stały {{ wyrażenie }} dalszy tekst stały</p>

Angular oblicza to, co stoi między klamrami, zamienia wynik na tekst i wstawia go w to miejsce. Gdy wartość pola się zmieni, napis na ekranie zmieni się razem z nią.

Co wolno w klamrach, a czego nie

Klamry służą do pokazywania. Wolno w nich odczytać wartość i coś policzyć. Zmienianie danych to zadanie metod w klasie.

Bez this

W metodach klasy piszesz this.nazwa. W szablonie — samo nazwa: Angular wie, że chodzi o ten komponent. Zapis {{ this.nazwa }} też się skompiluje, ale nikt go tak nie pisze, więc i my nie będziemy.

Metoda potrzebuje nawiasów

{{ razem() }} pokaże wynik. {{ razem }} pokaże na ekranie… treść funkcji jako tekst. To nie jest błąd kompilacji — terminal pokaże tylko żółte ostrzeżenie NG8117, dlatego tak łatwo je przeoczyć.

Pole klasy na ekranie

Klasa przechowuje dane, szablon je pokazuje. Klamry łączą jedno z drugim — także w środku zdania.

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

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

<div class="card p-3 m-3" style="width: 22rem">
  <h5>{{ nazwa }}</h5>
  <p>Sala {{ sala }}, wolne miejsca: {{ wolneMiejsca }}</p>
</div>

Turniej retro
Sala 12, wolne miejsca: 2

Pola są readonly, bo w tej lekcji tylko je pokazujemy. Zmień wartość sala w pliku .ts i zapisz — ekran zmieni się sam.

W klamrach może być wyrażenie

Między klamrami nie musi stać sama nazwa pola. Może tam być obliczenie, wywołanie metody klasy albo metoda tekstu. Lista to klasy Bootstrapa list-group i list-group-item — każdy element w osobnym wierszu z ramką.

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

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly cena = 12.5;
    readonly sztuki = 3;
    readonly imie = 'ala';

    razem(): number {
        return this.cena * this.sztuki;
    }
}

<ul class="list-group m-3" style="width: 22rem">
  <li class="list-group-item">Cena: {{ cena }} zł</li>
  <li class="list-group-item">Sztuk: {{ sztuki }}</li>
  <li class="list-group-item">Razem: {{ cena * sztuki }} zł</li>
  <li class="list-group-item">Razem z metody: {{ razem() }} zł</li>
  <li class="list-group-item">Wielkimi literami: {{ imie.toUpperCase() }}</li>
  <li class="list-group-item">Długość imienia: {{ imie.length }}</li>
</ul>

Cena: 12.5 zł
Sztuk: 3
Razem: 37.5 zł
Razem z metody: 37.5 zł
Wielkimi literami: ALA
Długość imienia: 3

Trzeci i czwarty wiersz dają to samo — raz policzone w szablonie, raz w metodzie. Liczby mają kropkę zamiast przecinka, bo to zapis JavaScriptu; polski format poznasz w lekcji 16.

Czego w klamrach nie wolno

Interpolacja pokazuje wartość, ale jej nie zmienia. Zacznij od wersji poprawnej, a potem po kolei wklejaj zapisy błędne i czytaj komunikaty.

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

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    licznik = 0;
    readonly teraz = new Date();
}

<div class="p-3">
  <p>Poprawnie: {{ licznik }}</p>
  <p>Też poprawnie: {{ licznik + 1 }}</p>
  <p>Data działa, ale wygląda brzydko: {{ teraz }}</p>
</div>

<p>{{ licznik = 5 }}</p>
<p>{{ licznik++ }}</p>
<p>{{ Math.round(licznik) }}</p>

✘ [ERROR] NG5002: Parser Error: Bindings cannot contain assignments at column 12 in [ licznik = 5 ]
✘ [ERROR] NG5002: Parser Error: Unexpected end of expression:  licznik++
✘ [ERROR] TS2339: Property 'Math' does not exist on type 'Demo'.

Każdy komunikat podaje plik i wiersz. Bindings cannot contain assignments znaczy dosłownie „wiązania nie mogą zawierać przypisań”. Property 'Math’ does not exist on type 'Demo’ — szablon szuka Math w klasie Demo i go nie znajduje.

Wybór napisu i ładna cena

Dwa wyrażenia, które w tym kursie zobaczysz setki razy: operator ?:, który wybiera napis, i toFixed(2), który pokazuje cenę z groszami.

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

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly nazwa = 'Warsztat druku 3D';
    readonly cena = 15;
    readonly wolneMiejsca = 0;

    opis(): string {
        return this.nazwa + ' — ' + this.cena.toFixed(2) + ' zł';
    }
}

<div class="card p-3 m-3" style="width: 24rem">
  <h5>{{ nazwa }}</h5>
  <p class="mb-1">Cena: {{ cena.toFixed(2) }} zł</p>
  <p class="mb-1">Status: {{ wolneMiejsca > 0 ? 'są wolne miejsca' : 'brak miejsc' }}</p>
  <p class="mb-1">Liter w nazwie: {{ nazwa.length }}</p>
  <p class="mb-0 text-muted">{{ opis() }}</p>
</div>

Warsztat druku 3D
Cena: 15.00 zł
Status: brak miejsc
Liter w nazwie: 17
Warsztat druku 3D — 15.00 zł

15 zamienia się w 15.00, bo toFixed(2) zawsze dopisuje dwa miejsca po kropce. Zmień wolneMiejsca na 4 i zapisz — status zmieni się na „są wolne miejsca”. Metoda opis() składa tekst z kilku pól — w klasie, więc szablon zostaje krótki.

Zestawienie elementów

Zanim utkniesz

Zadania

<p>{{ nazwa.toUppercase() }}</p>
<p>Razem: {{ razem }}</p>
<p>Po zaokrągleniu: {{ Math.round(cena) }}</p>
<p>Dodaj sztukę: {{ sztuki = sztuki + 1 }}</p>
<p>Cena: {{ cena.toFixed(2) }} zł</p>

Co trzeba zapamiętać

• {{ pole }} wstawia wartość z klasy do szablonu; w szablonie nie piszemy this.
• W klamrach może stać obliczenie, metoda klasy albo metoda tekstu czy liczby.
• Metodę wywołujesz z nawiasami; bez nich zobaczysz treść funkcji i ostrzeżenie NG8117.
• warunek ? a : b wybiera jeden z dwóch wyników; więcej przypadków — metoda z if.
• toFixed(2) pokazuje liczbę z dwoma miejscami po kropce.
• Interpolacja niczego nie zmienia: przypisania dają błąd NG5002.
• Szablon widzi tylko składowe swojej klasy — Math i inne obiekty globalne nie są dostępne.

Sprawdź się: masz pole cena = 20 i metodę zRabatem(). Co pokaże {{ zRabatem }}, a co {{ zRabatem() }}?

Dokumentacja: angular.dev — wiązanie danych w szablonie.