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

1. Podstawy interpolacji

Interpolacja w Angularze to podstawowy mechanizm, który pozwala na wyświetlanie dynamicznych danych w szablonie HTML. Umożliwia ona osadzanie wartości zmiennych z komponentu TypeScript bezpośrednio w widoku, co jest kluczowe przy tworzeniu interaktywnych aplikacji.

Jak działa interpolacja?

Interpolacja wykorzystuje podwójne nawiasy klamrowe {{ }}, w których umieszczamy wyrażenia lub zmienne zdefiniowane w komponencie. Angular zastępuje te wyrażenia ich aktualnymi wartościami podczas renderowania widoku.

2. Krok po kroku: Użycie interpolacji

Krok 1: Definiowanie zmiennej w komponencie

W pliku TypeScript komponentu definiujesz zmienną lub właściwość, którą chcesz wyświetlić.

export class AppComponent {
  message = 'Witaj, uczniu!';
}

Krok 2: Użycie interpolacji w szablonie

W pliku HTML komponentu używasz podwójnych nawiasów klamrowych, aby osadzić wartość tej zmiennej.

<h1>{{ message }}</h1>

Po uruchomieniu aplikacji na stronie pojawi się nagłówek z tekstem 'Witaj, uczniu!'.

3. Przykład praktyczny – egzamin INF.04

TypeScript (app.component.ts)

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'INF.04-03-23.06-SG';
}

Szablon HTML (app.component.html)

<div class="container">
  <div class="alert alert-primary text-center">
    {{ title }}
  </div>
</div>

W szablonie używasz interpolacji {{ title }}, aby wyświetlić wartość zmiennej title w przeglądarce.

4. Rozszerzone możliwości interpolacji

Operacje matematyczne

Możesz wykonywać proste operacje w interpolacji.

<p>2 + 3 = {{ 2 + 3 }}</p>
<p>10 * 5 = {{ 10 * 5 }}</p>
<p>100 / 4 = {{ 100 / 4 }}</p>

Wynik:

2 + 3 = 5
10 * 5 = 50
100 / 4 = 25

Wywoływanie metod

Możesz wyświetlać wyniki metod zdefiniowanych w komponencie.

export class AppComponent {
  getCurrentYear(): number {
    return new Date().getFullYear();
  }
}

<p>Aktualny rok: {{ getCurrentYear() }}</p>

Warunki ternarne

export class AppComponent {
  isLoggedIn = true;
}

<p>{{ isLoggedIn ? 'Witaj, użytkowniku!' : 'Zaloguj się' }}</p>

5.Operator bezpiecznej nawigacji (?.) – Safe Navigation Operator

Wyjaśnienie: Ten operator chroni przed błędami gdy próbujemy dostać się do właściwości obiektu, który może być null lub undefined.

export class AppComponent {
  user?: {
    name: string;
    address?: {
      city: string;
      zipCode: string;
    }
  };
  
  // Czasami user może być undefined
  ngOnInit() {
    // Symulacja ładowania danych
    setTimeout(() => {
      this.user = {
        name: 'Jan Kowalski',
        address: {
          city: 'Warszawa',
          zipCode: '00-001'
        }
      };
    }, 2000);
  }
}

<!-- BEZ operatora ?. - może spowodować błąd -->
<!-- <p>Miasto: {{ user.address.city }}</p> --> <!-- ❌ ERROR jeśli user jest undefined -->

<!-- Z operatorem ?. - bezpieczne -->
<p>Miasto: {{ user?.address?.city }}</p> <!-- ✅ Wyświetli pusty string jeśli brak danych -->

<!-- Możesz też dodać wartość domyślną -->
<p>Miasto: {{ user?.address?.city || 'Ładowanie...' }}</p>

Dlaczego to ważne? Bez tego operatora aplikacja może się „wysypać” z błędem gdy dane są ładowane asynchronicznie.

6. Operator Nullish Coalescing (??) – nowość w TypeScript/Angular

Wyjaśnienie: Operator ?? zwraca prawą stronę wyrażenia tylko gdy lewa strona jest null lub undefined (NIE dla 0, '', false).

export class AppComponent {
  // Różne przypadki wartości
  username: string | null = null;
  score = 0;
  message = '';
  isActive = false;
  
  // Wartości domyślne
  defaultUsername = 'Gość';
  defaultScore = 100;
  defaultMessage = 'Brak wiadomości';
}

<!-- Różnica między || a ?? -->

<!-- Operator || - traktuje 0, '', false jako "falsy" -->
<p>Wynik: {{ score || defaultScore }}</p> <!-- Wyświetli: 100 (bo 0 jest falsy) ❌ -->
<p>Wiadomość: {{ message || defaultMessage }}</p> <!-- Wyświetli: "Brak wiadomości" ❌ -->

<!-- Operator ?? - tylko null/undefined -->
<p>Wynik: {{ score ?? defaultScore }}</p> <!-- Wyświetli: 0 (poprawnie!) ✅ -->
<p>Użytkownik: {{ username ?? defaultUsername }}</p> <!-- Wyświetli: "Gość" ✅ -->

Kiedy używać? Gdy chcesz zachować wartości takie jak 0, pusty string '' czy false, a jedynie zastąpić null lub undefined.