Interpolacja w Angularze

Interpolacja w Angularze to jedna z podstawowych technik wiązania danych (data binding), która pozwala na wstrzykiwanie dynamicznych treści do szablonów HTML aplikacji. Umożliwia to bezpośrednie wyświetlanie wartości zmiennych komponentu, wyrażeń lub wyników funkcji bezpośrednio w widoku użytkownika. Działa poprzez umieszczenie wyrażenia w podwójnych nawiasach klamrowych {{...}}, które Angular automatycznie ocenia i zamienia na tekst w DOM.

Jak działa interpolacja?

Kiedy Angular napotyka wyrażenie interpolacji w szablonie HTML, ocenia je względem kontekstu bieżącego komponentu. Oznacza to, że każde odniesienie do zmiennych lub funkcji w wyrażeniu interpolacji jest rozpatrywane w zakresie właściwości i metod klasy komponentu. Angular monitoruje zmiany tych wartości i automatycznie aktualizuje DOM, kiedy wartość wyrażenia się zmienia.

Przykład użycia interpolacji:

Załóżmy, że chcemy wyświetlić powitanie użytkownika w aplikacji Angular. Możemy to zrobić, tworząc komponent z właściwością userName, a następnie używając interpolacji w szablonie HTML komponentu, aby wyświetlić wartość tej właściwości.

Krok 1: Definiowanie klasy komponentu

W pliku TypeScript komponentu (app.component.ts), zdefiniujmy prosty komponent z właściwością userName:

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  userName = 'Jan Kowalski';
}

Krok 2: Użycie interpolacji w szablonie

W pliku szablonu HTML tego komponentu (app.component.html), użyjemy interpolacji do wyświetlenia wartości userName:

<h1>Witaj, {{ userName }}!</h1>

Kiedy Angular renderuje ten komponent, wyrażenie interpolacji {{ userName }} zostanie zastąpione aktualną wartością właściwości userName z klasy komponentu, wynikającym w wyświetleniu „Witaj, Jan Kowalski!” w przeglądarce.