Angular Academy · Lektion

ng-template und ng-container

Template-Fragmente definieren und aufnehmen

ng-template und ng-container ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Vorlagen, die nicht gerendert werden

<ng-template> definiert einen Markup-Block, der nicht gerendert wird, bis ihn etwas ausdrücklich instanziiert. Es bildet die Grundlage struktureller Direktiven wie *ngIf.

Eine Vorlage definieren

Der Inhalt innerhalb von <ng-template> bleibt inaktiv. Sie versehen ihn mit einer Referenzvariablen, um ihn an anderer Stelle zu verwenden.

<ng-template #empty>
  <p>No items found.</p>
</ng-template>

Mit ngTemplateOutlet rendern

Verwenden Sie ngTemplateOutlet, um eine Vorlage über ihre Referenz zu rendern.

<ng-container *ngTemplateOutlet="empty"></ng-container>

<ng-template #empty>
  <p>No items found.</p>
</ng-template>

Warum ng-container?

<ng-container> ist ein logisches Element ohne DOM-Repräsentation zur Gruppierung. Damit können Sie Direktiven anwenden oder Nodes gruppieren, ohne dem DOM ein zusätzliches Wrapper-Element hinzuzufügen.

Wrapper-Divs vermeiden

Ohne ng-container müssten Sie möglicherweise ein nutzloses <div> hinzufügen, nur um eine Direktive daran zu hosten. ng-container verschwindet aus der gerenderten Ausgabe.

<ng-container *ngIf="user">
  <h2>{{ user.name }}</h2>
  <p>{{ user.email }}</p>
</ng-container>

Kontrollfluss gruppieren

ng-container eignet sich hervorragend, um neue Kontrollflussblöcke zu umschließen, ohne das DOM zu erweitern.

<ng-container *ngIf="ready">
  @for (item of items; track item.id) {
    <li>{{ item.name }}</li>
  }
</ng-container>

Vorlagenkontext

Vorlagen können ein context-Objekt empfangen, das Werte über let--Variablen bereitstellt.

<ng-template #row let-name="name">
  <p>{{ name }}</p>
</ng-template>

<ng-container
  *ngTemplateOutlet="row; context: { name: 'Ada' }">
</ng-container>

Standardwert des Kontexts

Der spezielle Kontextwert $implicit wird an eine let--Variable ohne zugewiesenen Schlüssel gebunden.

<ng-template #item let-value>
  <span>{{ value }}</span>
</ng-template>

<ng-container
  *ngTemplateOutlet="item; context: { $implicit: 42 }">
</ng-container>

Vorlagen sind eigenständige Werte

Ein #ref auf einem <ng-template> ist eine TemplateRef. Sie können es als @Input übergeben, damit eine Komponente ihren Consumern die Anpassung von Teilen ihrer UI ermöglicht.

emptyTemplate = input<TemplateRef<unknown>>();

ng-container als Host

ng-container eignet sich außerdem als Host für Ausgabepunkte dynamischer Komponenten oder Vorlagen und hält dabei das DOM sauber.

<ng-container *ngComponentOutlet="widgetComponent">
</ng-container>

Welche Variante wann verwenden

ng-template: verzögertes oder wiederverwendbares Markup. ng-container: Gruppieren und Hosten von Direktiven ohne zusätzliches DOM. Beide werden häufig zusammen verwendet.

Kurze Überprüfung

Testen Sie Ihr Verständnis von ng-template und ng-container.

Zusammenfassung

Sie haben gelernt, dass <ng-template> inaktives, instanziierbares Markup enthält, das über ngTemplateOutlet (optional mit Kontext) gerendert wird, während <ng-container> Nodes gruppiert oder Direktiven hostet, ohne das DOM zu erweitern.

Häufig gestellte Fragen

Ist die Lektion „ng-template und ng-container“ kostenlos?

Ja — der vollständige Text von „ng-template und ng-container“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „ng-template und ng-container“?

Template-Fragmente definieren und aufnehmen Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „ng-template und ng-container“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy