Aufbau

Angular basiert auf einem komponentenorientierten Ansatz, wobei Komponenten die grundlegenden Bausteine einer Anwendung darstellen. Jede Komponente ist eine eigenständige Einheit, die die UI (HTML), das Styling (CSS) und die Logik (TypeScript) kapselt. Die offizielle Angular-Dokumentation zeigt, wie mit Hilfe des @Component-Dekorators diese Bausteine definiert und zusammengeführt werden, sodass eine saubere Trennung von Darstellung und Verhalten erreicht wird.

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.

            hello.component.ts
        
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.

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

Styles (CSS/SCSS)

Hier werden Komponenten-spezifische Styles festgelegt.

            hello.component.scss
        
h1 {
    color: lightblue;
    font-family: Arial;
}

info

Angular ordnet die Selektoren statisch während der Kompilierungszeit zu. Änderung von DOM während der Laufzeit, unabhängig ob über Angular Bindings oder über DOM-APIs, wird keine Auswirkung auf die gerenderte Komponente haben.

`@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.

            Verweis auf eine Datei
        
@Component({
    ...
    templateUrl: './hello.component.html',
    ...
})

            Inline Template
        
@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.

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

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

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

navigation Navigation