Wiązanie właściwości [ ]

Czego się dziś nauczysz

Przygotowanie: lekcja 05 — umiesz pokazać wartość pola i użyć operatora ?:. Przewidywany czas: 45 min z zadaniami.

Tekst to nie to samo co wartość

Interpolacja zawsze daje tekst. Jeśli w polu jest liczba 0, w klamrach pojawi się napis "0". Jeśli wartość logiczna false — napis "false".

Dla akapitu to bez znaczenia, bo akapit i tak pokazuje tekst. Ale właściwość disabled pyta o prawdę lub fałsz, a napis "false" jest z jej punktu widzenia prawdziwy — bo jest niepusty. Stąd klasyczny błąd: przycisk zablokowany mimo false.

[właściwość]=”wyrażenie”

Nawiasy kwadratowe znaczą: „to, co w cudzysłowie, jest kodem, nie tekstem”. Angular oblicza wyrażenie i wynik — liczbę, wartość logiczną, tekst — przekazuje do właściwości elementu. W cudzysłowie wolno to samo, co w klamrach z lekcji 05: pola, obliczenia, metody, operator ?:.

<button title="Zapisz się">…</button>        <!-- stały tekst "Zapisz się" -->
<button [title]="opis">…</button>           <!-- wartość pola opis -->
<button [title]="'Zapisz się'">…</button>   <!-- stały tekst jako wyrażenie: apostrofy w środku -->

Odmiany, które przydadzą się od razu

Klasy stałe wpisujesz zwykłym class="…", a te zależne od danych — osobnymi wiązaniami [class.x]. Oba zapisy mogą stać na jednym elemencie i nie przeszkadzają sobie.

Klamry kontra nawiasy kwadratowe

Dwa zapisy, ten sam wynik — przy tekście naprawdę są równoważne.

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

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly opis = 'Turniej retro, piątek';
}

<div class="p-3">
  <p title="{{ opis }}">Najedź myszą — dymek z klamer</p>
  <p [title]="opis">Najedź myszą — dymek z nawiasów</p>
</div>

Najedź myszą — dymek z klamer      → dymek: Turniej retro, piątek
Najedź myszą — dymek z nawiasów    → dymek: Turniej retro, piątek

Oba akapity pokazują ten sam dymek. Pierwsza forma bywa wygodniejsza, gdy chcesz doklejać coś wokół wartości: title="Wydarzenie: {{ opis }}".

Tu klamry już nie wystarczą

Właściwość disabled nie interesuje się tekstem, tylko wartością logiczną.

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

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

<div class="p-3">
  <button class="btn btn-primary me-2" [disabled]="zablokowany">Poprawnie</button>
  <button class="btn btn-primary" disabled="{{ zablokowany }}">Źle</button>
</div>

[ Poprawnie ]  — aktywny
[ Źle ]        — zablokowany (wyblakły, nie da się kliknąć)

Drugi przycisk jest zablokowany, choć pole ma wartość false. Klamry zamieniły ją na tekst "false", a każdy niepusty tekst w disabled znaczy „zablokuj”.

Wartość policzona w locie

W nawiasach kwadratowych może stać wyrażenie — tak samo jak w klamrach. Jedno pole steruje tu dwiema właściwościami.

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

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly wolneMiejsca = 0;
    readonly nazwa = 'Noc robotów';
}

<div class="card p-3 m-3" style="width: 22rem">
  <h5>{{ nazwa }}</h5>
  <p>Wolne miejsca: {{ wolneMiejsca }}</p>
  <button class="btn btn-primary"
          [disabled]="wolneMiejsca === 0"
          [title]="wolneMiejsca === 0 ? 'Brak miejsc' : 'Kliknij, aby się zapisać'">
    Zapisz się
  </button>
</div>

Noc robotów
Wolne miejsca: 0
[ Zapisz się ]  — zablokowany, dymek: Brak miejsc

Zmień wolneMiejsca na 3 — przycisk ożyje, a dymek zmieni treść na „Kliknij, aby się zapisać”. Długi atrybut można rozbić na kilka wierszy — Angular tego nie zauważy.

Klasa CSS i styl sterowane danymi

Najczęstsze zastosowanie w tym kursie: włączanie i wyłączanie klasy Bootstrapa.

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

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

<div class="card p-3 m-3" [style.width.rem]="szerokosc">
  <h5>Turniej retro</h5>
  <span class="badge" [class.text-bg-danger]="ostatnieMiejsca" [class.text-bg-success]="!ostatnieMiejsca">
    {{ ostatnieMiejsca ? 'Ostatnie miejsca' : 'Wolne miejsca' }}
  </span>
</div>

┌──────────────────────┐
│ Turniej retro        │
│ [Ostatnie miejsca]   │  ← czerwona odznaka
└──────────────────────┘   szerokość 18rem

Zmień ostatnieMiejsca na false — odznaka zrobi się zielona, a napis się zmieni. Klasa badge jest wpisana na stałe, kolor sterują dwa wiązania z przeciwnymi warunkami (! to zaprzeczenie). Szerokość karty bierze się z pola: [style.width.rem] dokleja jednostkę za Ciebie.

Zestawienie elementów

Zanim utkniesz

Zadania

Co trzeba zapamiętać

• {{ }} daje tekst, [ ] przekazuje wartość.
• Przy właściwościach logicznych, takich jak disabled, klamry zawsze blokują — tylko [disabled] działa poprawnie.
• W nawiasach kwadratowych stoi wyrażenie: nazwa pola, obliczenie, metoda albo ?:; stały tekst wymaga apostrofów.
• [class.nazwa] włącza jedną klasę, nie ruszając pozostałych.
• [style.x.jednostka] ustawia jeden styl z jednostką.
• [attr.x] ustawia atrybut, którego nie ma wśród właściwości.
• [ ] i {{ }} w jednym atrybucie dają błąd NG5002.

Sprawdź się: masz pole ukryty = false. Napisz dwa warianty blokowania przycisku tym polem i powiedz, który z nich zadziała zgodnie z oczekiwaniem.

Dokumentacja: angular.dev — wiązanie właściwości i atrybutów.