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.