ngTemplate to potężna funkcjonalność w Angularze, która pozwala na definiowanie szablonów HTML wewnątrz komponentu Angularowego, które mogą być renderowane warunkowo lub wielokrotnie w różnych częściach aplikacji. Szablony te są definiowane za pomocą dyrektywy <ng-template> i mogą być wykorzystywane w połączeniu z dyrektywami takimi jak ngIf, ngFor, ngSwitch oraz własnymi dyrektywami strukturalnymi.
Podstawowe zastosowanie ngTemplate
Szablon ng-template nie jest renderowany domyślnie, gdy jest umieszczony w komponencie. Zamiast tego, potrzebuje dyrektywy, która wskaże, kiedy i jak szablon ma być wyświetlony. Może to być na przykład ngIf albo ngFor.
Przykład 1: Użycie ngTemplate z ngIf
Rozważmy scenariusz, w którym chcesz wyświetlić wiadomość powitalną tylko wtedy, gdy użytkownik jest zalogowany. Użyjemy ngTemplate wraz z ngIf do osiągnięcia tego celu.
1.Definicja Komponentu: Najpierw zdefiniujmy komponent AppComponent, który będzie używał ngTemplate.
// app.component.ts
import { Component, CommonModule } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
isLoggedIn = true;
}
2.Szablon HTML z ngTemplate
W pliku app.component.html, zdefiniujmy ng-template z dyrektywą ngIf.
<!-- app.component.html -->
<ng-container *ngIf="isLoggedIn; else notLoggedIn">
<p>Witaj, użytkowniku!</p>
</ng-container>
<ng-template #notLoggedIn>
<p>Musisz się zalogować.</p>
</ng-template>
W powyższym kodzie, ng-container używa ngIf do sprawdzenia, czy isLoggedIn jest true. Jeśli nie, renderowany jest szablon notLoggedIn.
Przykład 2: Użycie ngTemplate w ngFor
Załóżmy, że chcemy wyrenderować listę elementów, ale każdy element ma być otoczony dodatkowym HTML tylko w pewnych warunkach.
1.Modyfikacja Komponentu: do istniejącego komponentu dodajmy listę elementów:
export class AppComponent {
items = ['Apple', 'Banana', 'Cherry'];
}
2.Szablon HTML z ngTemplate i ngFor
<ul>
<li *ngFor="let item of items; let i = index">
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item, index: i}"></ng-container>
</li>
</ng-template>
<ng-template #itemTemplate let-item let-i="index">
<strong>{{ i + 1 }}.</strong> {{ item }}
</ng-template>
W tym przykładzie, ngFor iteruje przez listę items, a ngTemplateOutlet jest używany do renderowania każdego elementu listy z dodatkowym HTML w ng-template.
Użycie ngTemplate w Angularze umożliwia bardziej dynamiczne i elastyczne zarządzanie treścią w aplikacji. Pozwala na oddzielenie logiki warunkowej od głównego szablonu, co czyni kod łatwiejszym do zarządzania i testowania. Dzięki komponentom standalone, cały proces staje się jeszcze bardziej modularny i uproszczony, co jest znaczną zaletą w większych projektach Angularowych.