Interpolacja w Angularze

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

1. 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>