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.
Krok po kroku: Użycie interpolacji
- Definiowanie zmiennej w komponencieW pliku TypeScript komponentu definiujesz zmienną lub właściwość, którą chcesz wyświetlić.
export class AppComponent {
message = 'Witaj, uczniu!';
}
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!'
.
Przykład użycia interpolacji:
Krok 1: 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';
}
W tym komponencie AppComponent
zdefiniowałeś zmienną title
, która przechowuje ciąg znaków 'INF.04-03-23.06-SG'
.
Krok 2: 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. Dzięki temu użytkownik zobaczy tekst 'INF.04-03-23.06-SG'
wewnątrz elementu div
.
Dodatkowe przykłady
- Operacje matematyczneMożesz wykonywać proste operacje w interpolacji.
<p>2 + 3 = {{ 2 + 3 }}</p>
Wynik: 2 + 3 = 5
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>
Ważne uwagi
- BezpieczeństwoAngular automatycznie zabezpiecza aplikację przed atakami XSS, sanitizując dane w interpolacji.
- WydajnośćUnikaj umieszczania złożonych wyrażeń lub ciężkich obliczeń w interpolacji, ponieważ może to wpłynąć na wydajność aplikacji.
- Czytelność koduDla lepszej czytelności i utrzymania kodu zaleca się trzymanie logiki w komponencie, a w szablonie ograniczenie się do prostych wyrażeń.
Ćwiczenie:
- Dodaj do swojego komponentu nową zmienną, np.
studentName = 'Anna Nowak';
- Wyświetl tę zmienną w szablonie za pomocą interpolacji:
<p>Student: {{ studentName }}</p>