Wiederverwendbare UI-Templates mit Angular ng-template

David Göschel

22. August 2025 • 2 Min. Lesezeit

Wie du mit Angulars ng-template wiederverwendbare UI-Templates baust, die unabhängig von der Logik sind. Vorteile, Praxisbeispiel und Tipps für skalierbare Frontends

Mehr Flexibilität mit Angular ng-template

Wenn man längere Zeit mit Angular arbeitet, fragt man sich irgendwann, wie man nicht nur wiederverwendbare Komponenten, sondern auch wiederverwendbare UI-Templates erstellen kann

Angular bietet mit ng-template ein Feature, um dynamische UI-Templates zu erstellen und in der gesamten Applikation wiederzuverwenden

Der Vorteil: Entwickler können UI-Templates bauen, die unabhängig von der Logik sind und sich voll auf die Darstellung konzentrieren. Optional lassen sich auch Daten ins Template übergeben, um die Darstellung flexibel anzupassen

Vorteile von ng-template

Wer ng-template richtig einsetzt, kann:

• UI von Logik sauber trennen
• Performance durch Lazy-Loading optimieren
• Modularität und Wiederverwendbarkeit der UI erhöhen

Nutzen im Projekt

Für ein Projekt bedeutet der Einsatz von ng-template:

• Weniger Duplizierungen von gleicher oder ähnlicher UI
• Skalierbare und flexible Frontend-Architektur
• Schnelleres Arbeiten durch zentrale Anpassungen von UI-Templates

Beispiel: Einfaches ng-template

<ng-template #customTemplate let-data>
  <div class="card">
    <h2>{{ data.title }}</h2>
    <p>{{ data.description }}</p>
  </div>
</ng-template>

<!-- Template an anderer Stelle einbinden -->
<ng-container *ngTemplateOutlet="customTemplate; context: { $implicit: myData }"></ng-container>

In diesem Beispiel:

• #customTemplate definiert das wiederverwendbare UI-Template
• Mit *ngTemplateOutlet wird es an beliebiger Stelle eingebunden
• Über context lassen sich Daten ins Template geben (myData)

Das folgende kurze Video zeigt, wie flexibel und dynamisch sich UI-Templates mit ng-template erstellen lassen:

Fazit

ng-templates sind ein Must-Have, sobald die Anforderungen an das UI wachsen. Sie helfen dabei:

• Wartbare Code-Strukturen zu schaffen
• Wiederverwendbare UI-Bausteine aufzubauen
• Projekte schneller und skalierbarer zu machen