Aufbau

Rolle eine Komponente

• UI-Einheit: Definiert einen bestimmten Teil der Benutzeroberfläche
• Logik: In der zugehörigen TypeScript-Klasse wird das Verhalten und der Zustand der Komponente festgelegt
• Darstellung: Über ein HTML-Template, das die Struktur der UI vorgibt, und CSS-Styles, die das Aussehen steuern, wird die Gesamtdarstellung kontrolliert

Aufbau einer Komponente

Eine Angular-Komponente wird dem @Component Dekorator definiert (weiter unten beschrieben) und besteht aus folgenden Bestandteilen.

Logik (TypeScript)

Die Klasse steuert das Verhalten der Komponente.

import { Component } from '@angular/core';

@Component({
    selector: 'app-hello',
    standalone: true,
    templateUrl: './hello.component.html',
    styleUrls: ['./hello.component.scss']
})
export class HelloComponent {
    name = 'Angular';

    changeName() {
        this.name = 'World';
    }
}

Template (HTML)

Das Template definiert die Struktur der Komponente.

<h1>Hello, {{ name }}</h1>
<button (click)="changeName()">Change name</button>

Styles (CSS/SCSS)

Hier werden Komponenten-spezifische Styles festgelegt.

h1 {
    color: lightblue;
    font-family: Arial;
}

@Component Dekorator

Der zentrale Mechanismus zur Definition einer Komponente ist der @Component Dekorator. Dieser verbindet die Klassenlogik mit den Metadaten, die Angular benötigt, um die Komponente korrekt zu verarbeiten.

Feld: selector

Gibt den benutzerdefinierten HTML-Tag an, mit dem die Komponente in Vorlagen eingebunden wird.

@Component({
    selector: 'app-hello',
    ...
})

Im Falle von diesem Selektor wird die Komponente folgendermaßen in einem Template verwendet werden.

<app-hello></app-hello>

Wichtiger Hinweis

Angular Element darf genau einem Komponenten-Selektor entsprechen. Wenn mehrere Komponenten-Selectoren auf ein Element zeigen/referenzieren, wirft Angular einen Fehler.

Feld: template | templateUrl

Definiert das HTML-Markup, das von der Komponente gerendert wird. Dabei kann direkt im Dekorator ein Inline-Template angegeben werden oder alternativ auf eine separate HTML-Datei verwiesen werden.

@Component({
    ...
    templateUrl: './hello.component.html',
    ...
})

@Component({
    ...
    template: `
        <h1>Hello, {{ name }}</h1>
    `,
    ...
})

Feld: styles | styleUrls

Bestimmen die CSS-Stile, die für die Komponente gelten. Wie beim Template können auch hier inline definierte Styles oder externe CSS/SCSS-Dateien verwendet werden.

@Component({
    ...
    styleUrls: ['./hello.component.scss']
})

@Component({
    ...
    styles: [`
        h1 {
            color: #1976d2;
        }
    `]
})

Hierbei handelt es sich um die wichtigsten Felder. Es gibt eine Reihe weiterer Felder, die unterschiedliche Aufgaben übernehmen.