Interpolacja w Angularze – https://school-it.pl/

01

Czym jest komponent?

Zanim zrozumiesz interpolację, musisz wiedzieć czym jest komponent – bo to właśnie on dostarcza dane do wyświetlenia.

Komponent w Angularze to para dwóch plików, które ze sobą współpracują:

.ts

logika i dane
(TypeScript)

↔

.html

wygląd
(szablon)

Plik .ts to klasa TypeScript – definiuje zmienne i metody. Plik .html to szablon – opisuje co ma być wyświetlone. Interpolacja to most między nimi: pozwala wziąć zmienną z pliku .ts i wyświetlić jej wartość w pliku .html.

ts/app.component.ts TS

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

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  // Tutaj definiujemy zmienne dostępne w szablonie
  tytul = 'Moja aplikacja Angular';
  rok = 2025;
}

Dekorator @Component – co to jest?

@Component({...}) to dekorator – specjalna adnotacja, która mówi Angularowi: „ta klasa jest komponentem”. Właściwość selector: 'app-root' to nazwa znacznika HTML, przez który ten komponent jest używany. Właściwość templateUrl wskazuje plik HTML z szablonem. Na razie nie musisz rozumieć każdego szczegółu – skupiamy się na klasie.

02

Składnia interpolacji – podwójne klamry

Interpolacja w Angularze wygląda tak: {{ nazwaZmiennej }}. Dwie klamry otwierające i dwie zamykające – w środku nazwa zmiennej zdefiniowanej w pliku .ts.

Zobaczmy jak to wygląda na kompletnym przykładzie. Mamy plik TypeScript z danymi i plik HTML, który je wyświetla:

ts/app.component.ts TS

export class AppComponent {
  imie     = 'Anna';
  nazwisko = 'Kowalska';
  klasa    = '3TI';
  srednia  = 4.75;
}

html/app.component.html HTML

<div class="container mt-4">
  <h1>Witaj, {{ imie }} {{ nazwisko }}!</h1>
  <p>Klasa: {{ klasa }}</p>
  <p>Średnia ocen: {{ srednia }}</p>
</div>

<!-- Przeglądarka wyświetli: -->
<!-- Witaj, Anna Kowalska!   -->
<!-- Klasa: 3TI              -->
<!-- Średnia ocen: 4.75      -->

imie = 'Anna’

zmienna w .ts

→

interpolacja w .html

→

Anna

wynik w przeglądarce

Reaktywność – kluczowa zaleta

Gdy zmienisz wartość zmiennej w pliku .ts, Angular automatycznie zaktualizuje wszystkie miejsca w HTML, gdzie ta zmienna jest użyta. Nie musisz ręcznie manipulować DOM-em jak w czystym JavaScript.

03

Typy danych w interpolacji

W podwójnych klamrach możemy wyświetlać różne typy danych. Angular automatycznie zamieni każdą wartość na tekst.

Liczby i tekst

ts/app.component.ts TS

export class AppComponent {
  // string – tekst
  miasto: string = 'Lębork';

  // number – liczba całkowita
  liczbaUczniow: number = 28;

  // number – liczba zmiennoprzecinkowa
  temperatura: number = 21.5;

  // boolean – wartość logiczna (wyświetli się jako "true" lub "false")
  czyZalogowany: boolean = true;
}

html/app.component.html HTML

<p>Miasto: {{ miasto }}</p>             <!-- Lębork -->
<p>Liczba uczniów: {{ liczbaUczniow }}</p> <!-- 28 -->
<p>Temperatura: {{ temperatura }} °C</p> <!-- 21.5 °C -->
<p>Zalogowany: {{ czyZalogowany }}</p>   <!-- true -->

Tablice i obiekty

Możemy też wyświetlać pojedyncze elementy tablic i właściwości obiektów. Do elementu tablicy odwołujemy się przez indeks (od 0), do właściwości obiektu przez kropkę.

ts/app.component.ts TS

export class AppComponent {
  // Tablica
  oceny: number[] = [5, 4, 3, 5, 4];

  // Obiekt
  uczen = {
    imie: 'Piotr',
    klasa: '2TI',
    wiek: 17
  };
}

html/app.component.html HTML

<!-- Elementy tablicy przez indeks -->
<p>Pierwsza ocena: {{ oceny[0] }}</p>   <!-- 5 -->
<p>Trzecia ocena: {{ oceny[2] }}</p>    <!-- 3 -->
<p>Liczba ocen: {{ oceny.length }}</p>   <!-- 5 -->

<!-- Właściwości obiektu przez kropkę -->
<p>Uczeń: {{ uczen.imie }}, klasa {{ uczen.klasa }}</p>
<p>Wiek: {{ uczen.wiek }} lat</p>

04

Wyrażenia w podwójnych klamrach

W klamrach {{ }} nie musimy podawać tylko nazwy zmiennej – możemy wpisać dowolne wyrażenie, które da jakiś wynik. Angular obliczy je i wyświetli.

ts/app.component.ts TS

export class AppComponent {
  cena    = 49.99;
  ilosc   = 3;
  imie    = 'jan';
  punkty  = 87;
}

html/app.component.html HTML

<!-- Działania matematyczne -->
<p>Razem: {{ cena * ilosc }} zł</p>           <!-- 149.97 zł -->
<p>Podatek: {{ cena * ilosc * 0.23 }} zł</p>  <!-- 34.49 zł -->

<!-- Operacje na stringach -->
<p>Imię z wielką literą: {{ imie.toUpperCase() }}</p> <!-- JAN -->
<p>Długość imienia: {{ imie.length }}</p>               <!-- 3 -->

<!-- Operator warunkowy (ternary) -->
<p>Wynik: {{ punkty >= 50 ? 'Zaliczono' : 'Nie zaliczono' }}</p>
<!-- Zaliczono (bo 87 >= 50) -->

<!-- Łączenie stringów -->
<p>{{ 'Witaj, ' + imie + '!' }}</p>               <!-- Witaj, jan! -->

Czego NIE wolno robić w klamrach

Interpolacja służy tylko do odczytywania i wyświetlania danych. Nie można w niej przypisywać wartości, deklarować zmiennych ani używać instrukcji if / for:

<!-- ❌ To jest BŁĘDEM -->
{{ x = 5 }}             <!-- przypisanie - niedozwolone -->
{{ let y = 10 }}        <!-- deklaracja - niedozwolone -->
{{ if (x > 0) {...} }}  <!-- instrukcja if - niedozwolone -->

<!-- ✅ To jest poprawne -->
{{ x + 5 }}             <!-- wyrażenie dające wynik -->
{{ x > 0 ? 'tak' : 'nie' }}  <!-- operator ternary -->

05

Wywoływanie metod w interpolacji

W klamrach możemy też wywoływać metody zdefiniowane w klasie komponentu. To dobry sposób na obliczenia, które są zbyt złożone na jedno wyrażenie.

ts/app.component.ts TS

export class AppComponent {
  oceny: number[] = [5, 4, 3, 5, 4];
  imie = 'anna';
  nazwisko = 'kowalska';

  // Metoda obliczająca średnią
  obliczSrednia(): number {
    const suma = this.oceny.reduce((a, b) => a + b, 0);
    return suma / this.oceny.length;
  }

  // Metoda formatująca imię i nazwisko
  pelneImie(): string {
    const i = this.imie[0].toUpperCase() + this.imie.slice(1);
    const n = this.nazwisko[0].toUpperCase() + this.nazwisko.slice(1);
    return `${i} ${n}`;
  }
}

html/app.component.html HTML

<h2>{{ pelneImie() }}</h2>
<!-- Anna Kowalska -->

<p>Średnia: {{ obliczSrednia() }}</p>
<!-- 4.2 -->

Wskazówka – proste wyrażenia w szablonie

Staraj się trzymać szablony proste – skomplikowane obliczenia przenieś do metod w klasie. Reguła: jeśli wyrażenie ma więcej niż jeden operator, napisz metodę. Szablon ma opisywać jak wygląda widok, nie jak działa logika.

06

Częste błędy

Poniżej zebrałem błędy, które popełnia prawie każdy na początku. Zapoznaj się z nimi, żeby unikać frustracji.

❌ Błąd 1 – Zmienna niezdefiniowana

❌ Źle

// .ts – brak zmiennej 'haslo'
export class AppComponent {
  login = 'admin';
  // haslo – nie zdefiniowane!
}

<!-- .html -->
<p>{{ login }} / {{ haslo }}</p>
<!-- Wynik: admin /  (puste!) -->

✅ Dobrze

export class AppComponent {
  login = 'admin';
  haslo = '****';
}

<p>{{ login }} / {{ haslo }}</p>
<!-- Wynik: admin / **** -->

❌ Błąd 2 – Jedna klamra zamiast dwóch

❌ Źle

<!-- Jedna klamra – to nie interpolacja! -->
<p>{ imie }</p>
<!-- Wynik: { imie } – dosłownie! -->

✅ Dobrze

<!-- Dwie klamry –  interpolacja Angular -->
<p>{{ imie }}</p>
<!-- Wynik: Anna -->

❌ Błąd 3 – HTML w interpolacji

❌ Źle – XSS alert!

// .ts
tresc = '<strong>Ważne!</strong>';

<!-- .html -->
<p>{{ tresc }}</p>
<!-- Wynik: <strong>Ważne!</strong>
     Angular wyświetli HTML jako tekst! -->

✅ Dobrze – InnerHTML binding

// Gdy NAPRAWDĘ potrzebujemy HTML w zmiennej:
<p [innerHTML]="tresc"></p>
<!-- Wynik: Ważne! (pogrubione) -->
<!-- Używaj ostrożnie – tylko z zaufaną treścią! -->

Dlaczego Angular blokuje HTML w interpolacji?

To celowe zabezpieczenie przed atakami XSS (Cross-Site Scripting). Gdyby Angular renderował HTML z interpolacji, atakujący mógłby wstrzyknąć złośliwy skrypt do aplikacji przez dane wpisane przez użytkownika (np. w formularzu). Angular automatycznie zabezpiecza wartości wyświetlane przez {{ }}.

✏️

Zadanie – wizytówka ucznia

Stwórz w projekcie Angular aplikację wyświetlającą wizytówkę ucznia. Wszystkie dane mają być zdefiniowane jako zmienne w klasie komponentu i wyświetlane przez interpolację.

W pliku app.component.ts zdefiniuj:

imie i nazwisko (string)
klasa (string, np. '3TI')
oceny – tablica co najmniej 5 liczb
metodę obliczSrednia() zwracającą średnią z tablicy ocen

W pliku app.component.html wyświetl:

Pełne imię i nazwisko w nagłówku <h1>
Klasę i aktualną datę (użyj new Date().getFullYear())
Wszystkie oceny (możesz je po prostu wypisać przez [0], [1]…)
Obliczoną średnią przez wywołanie metody
Komunikat „Wzorowy uczeń!” lub „Do poprawy” zależnie od tego czy średnia jest większa lub równa 4.5 (użyj operatora ternary w klamrach)

Ostyluj całość używając klas Bootstrap (np. card, badge).

Następny temat

W następnym materiale poznamy zmienne szablonowe – mechanizm, który pozwala odwoływać się do elementów HTML bezpośrednio z poziomu szablonu, bez konieczności pisania kodu w TypeScript.

Interpolacja – dane w szablonie

Czym jest komponent?

Składnia interpolacji – podwójne klamry

Typy danych w interpolacji

Liczby i tekst

Tablice i obiekty

Wyrażenia w podwójnych klamrach

Wywoływanie metod w interpolacji

Częste błędy

❌ Błąd 1 – Zmienna niezdefiniowana

❌ Źle

✅ Dobrze

❌ Błąd 2 – Jedna klamra zamiast dwóch

❌ Źle

✅ Dobrze

❌ Błąd 3 – HTML w interpolacji

❌ Źle – XSS alert!

✅ Dobrze – InnerHTML binding

Zadanie – wizytówka ucznia