Angular basiert auf einem komponentenorientierten Ansatz, bei dem Komponenten die grundlegenden Bausteine jeder Anwendung darstellen. Jede Komponente ist eine eigenständige Einheit, die Benutzeroberfläche (HTML), Styling (CSS/SCSS) und Logik (TypeScript) kapselt. In diesem Artikel lernst du den detaillierten Aufbau einer Angular-Komponente kennen, wie der @Component-Dekorator funktioniert und wie du die neuen “Standalone Components” ab Angular 14+ (Standard ab v19) definierst.
Was ist eine Komponente?
Eine Komponente steuert einen spezifischen Bereich auf dem Bildschirm, den sogenannten View. Du kannst dir eine Angular-Anwendung als einen Baum aus Komponenten vorstellen (z. B. Root-Komponente -> Header, Sidebar, Main -> UserProfile -> ProfilePicture).
Jede Angular-Komponente besteht zwingend aus drei Dingen:
- Einer TypeScript-Klasse, die das Verhalten, die Daten (Zustand) und Funktionen (z. B. Event-Handler) enthält.
- Einem HTML-Template, das definiert, was im DOM gerendert wird.
- Einem CSS-Selektor, der bestimmt, wie die Komponente im HTML anderer Komponenten verwendet wird.
Optional, aber meistens vorhanden, sind CSS-Styles, die das Aussehen exklusiv für diese eine Komponente steuern.
Der @Component Dekorator
Um eine normale TypeScript-Klasse in eine Angular-Komponente zu verwandeln, wird der @Component-Dekorator direkt über der Klasse platziert. Dieser Dekorator nimmt ein Konfigurationsobjekt entgegen (die Metadaten), das Angular mitteilt, wie die Komponente verarbeitet werden soll.
Hier ist ein einfaches, vollständiges Beispiel einer modernen Standalone Component:
import { Component } from '@angular/core';
@Component({
selector: 'app-hello',
standalone: true,
template: `
<h1>Hallo, {{ name }}!</h1>
<button (click)="changeName()">Name ändern</button>
`,
styles: `
h1 {
color: #e50914;
font-family: sans-serif;
}
`
})
export class HelloComponent {
name = 'Angular';
changeName() {
this.name = 'Welt';
}
}Die wichtigsten Eigenschaften (Metadaten)
1. selector
Der CSS-Selektor bestimmt den Namen des HTML-Tags, mit dem du die Komponente in Vorlagen einbinden kannst. Wenn der Selektor app-hello ist, bindest du die Komponente in anderen Templates wie folgt ein:
<app-hello></app-hello>
<!-- oder als Self-Closing-Tag (ab Angular 19+ oft unterstützt) -->
<app-hello />2. template und templateUrl
Jede Komponente braucht ein Template. Mit template kannst du HTML direkt als Inline-String (bevorzugt Backticks) in der TypeScript-Datei schreiben. Das eignet sich gut für sehr kleine Komponenten.
Für größere Templates verweist du mit templateUrl auf eine separate HTML-Datei, z. B. templateUrl: './hello.component.html'.
3. styles und styleUrls
Analog zum Template kannst du CSS/SCSS-Regeln inline über styles definieren oder über styleUrls (oder in neuen Angular-Versionen auch styleUrl) auf externe Dateien verweisen. Styles in Angular sind standardmäßig gekapselt (View Encapsulation), das heißt, ein h1-Style in dieser Komponente beeinflusst keine h1-Elemente in anderen Komponenten.
4. standalone und imports
Seit Angular 14 gibt es Standalone-Komponenten. Sie benötigen kein umgebendes NgModule mehr. Durch standalone: true markierst du die Komponente als eigenständig.
Um andere Komponenten, Direktiven (wie NgClass) oder Pipes (wie DatePipe) in dieser Standalone-Komponente zu nutzen, musst du sie explizit in das imports-Array aufnehmen:
import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';
import { ProfilePictureComponent } from './profile-picture.component';
@Component({
selector: 'app-user',
standalone: true,
imports: [DatePipe, ProfilePictureComponent],
template: `
<app-profile-picture />
<p>Zuletzt online: {{ lastSeen | date:'short' }}</p>
`
})
export class UserComponent {
lastSeen = new Date();
}Architektur: Trennung oder Inline?
Angular zwingt dich nicht zu einer bestimmten Dateistruktur pro Komponente, aber es gibt einen klaren Community-Standard:
- Getrennte Dateien: Wenn Template oder Styles mehr als ca. 3–5 Zeilen umfassen, ist es übersichtlicher, sie in
.htmlund.scss/.cssDateien auszulagern. Das fördert die Lesbarkeit und hilft IDEs bei der Code-Vervollständigung. - Inline (Single-File Components): Für sehr kleine Präsentations-Komponenten (Dumb Components) wie Badges oder Buttons ist es oft eleganter, Template und Styles direkt im
@Component-Dekorator zu definieren.
Häufige Stolperfallen
Vergessenes imports-Array
Bei Standalone-Komponenten ist der häufigste Fehler, dass man versucht, eine andere Komponente, Direktive (z. B. ngClass) oder eine Pipe (z. B. async) im Template zu nutzen, ohne sie vorher ins imports-Array des @Component-Dekorators einzutragen. Angular wirft dann einen Fehler im Template.
standalone: false als Fallstrick
Wenn man ältere Tutorials liest, basieren diese auf NgModule. Ab Angular 19 ist standalone: true der Standard (oft muss es gar nicht mehr explizit hingeschrieben werden). Wenn eine Komponente standalone: false ist, muss sie zwingend in den declarations eines Moduls stehen.
Mehrere Selektoren matchen
Ein DOM-Element darf immer nur zu genau einer Angular-Komponente gehören. Wenn mehrere Komponenten-Selektoren auf dasselbe HTML-Tag passen, bricht Angular den Build mit einem Fehler ab.
Fehlendes Exportieren
Eine Komponentenklasse muss zwingend mit dem Schlüsselwort export versehen werden (export class MyComponent), damit sie in anderen Teilen der App importiert werden kann.