Komponenten in Angular

Angular-Komponenten sind das Herzstück jeder Angular-Anwendung. Sie ermöglichen es Entwicklern, die Benutzeroberfläche (UI) einer Webanwendung in kleine, wiederverwendbare Bausteine zu zerlegen. In diesem Artikel lernst du, was Komponenten in Angular sind, wie sie aufgebaut sind und wie du sie in deinem Projekt erstellst und organisierst.

Was sind Angular-Komponenten?

Eine Komponente in Angular ist eine Klasse, die mit einer Benutzeroberfläche verbunden ist und deren Verhalten steuert. Sie ist für die Anzeige eines bestimmten Bereichs der Anwendung zuständig und besteht im Wesentlichen aus drei Teilen:

1. Template: Das HTML-Template definiert die Struktur und das Layout der Komponente.
2. Class: Die TypeScript-Klasse enthält die Logik und das Verhalten der Komponente.
3. Styles: Das CSS-Stylesheet steuert das Aussehen der Komponente.

Eine Angular-Anwendung besteht aus vielen Komponenten, die miteinander kommunizieren, um eine vollständige Benutzererfahrung zu schaffen. Jede Komponente ist eigenständig und kann bei Bedarf wiederverwendet werden, was die Modularität und Wartbarkeit der Anwendung erheblich verbessert.

Aufbau einer Angular-Komponente

Um besser zu verstehen, wie eine Angular-Komponente aufgebaut ist, schauen wir uns die Struktur einer einfachen Komponente an:

1. Der `@Component`-Dekorator

In Angular werden Komponenten durch den `@Component`-Dekorator definiert. Dieser Dekorator gibt Angular die notwendigen Informationen über die Komponente, wie etwa das HTML-Template, die zugehörigen Styles und den selektor (wie die Komponente in HTML eingebunden wird).

Hier ein Beispiel für eine einfache Komponente:

import { Component } from '@angular/core';
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})

export class ExampleComponent {
  title = 'Meine erste Angular-Komponente';
}

• selector: Definiert, wie die Komponente im HTML verwendet wird. In diesem Fall kann die Komponente mit `<app-example></app-example>` eingebunden werden.
• templateUrl: Gibt die Datei an, die das HTML-Template der Komponente enthält.
• styleUrls: Definiert das zugehörige Stylesheet der Komponente.

2. Das Template

Das HTML-Template definiert, wie die Benutzeroberfläche der Komponente aussehen wird. Es kann einfache HTML-Tags sowie Angular-spezifische Syntax wie Datenbindung und Direktiven enthalten.

Hier ist ein Beispiel für ein einfaches HTML-Template:

<div>
  <h1>{{ title }}</h1>
  <p>Willkommen in meiner ersten Angular-Komponente!</p>
</div>

In diesem Beispiel wird der Titel der Komponente mit der Interpolation-Syntax `{{ title }}` dynamisch in das HTML eingefügt.

3. Die Klasse

Die Klasse einer Angular-Komponente enthält die Logik, die das Verhalten der Komponente steuert. Sie definiert Variablen und Methoden, die im Template verwendet werden können. In unserem Beispiel ist die Variable `title` definiert, die im Template gebunden wird.

Eine Komponente erstellen

Das Angular CLI macht es einfach, eine neue Komponente zu erstellen. Führe einfach folgenden Befehl in deinem Terminal aus:

ng generate component component-name

Das CLI erstellt automatisch die notwendigen Dateien für die Komponente:

• Eine `.ts`-Datei für die Komponentenskriptlogik.
• Eine `.html`-Datei für das HTML-Template.
• Eine `.css`-Datei für die Styles der Komponente.
• Eine `.spec.ts`-Datei für Unit-Tests.

Beispiel:

ng generate component hello-world

Dieser Befehl erstellt eine neue Komponente namens `hello-world` mit einer standardmäßigen Projektstruktur. Die erstellten Dateien befinden sich im `src/app/hello-world/` Verzeichnis. Diese neue Komponente kann nun in anderen Komponenten verwendet werden, indem sie im Template wie folgt eingebunden wird:

<app-hello-world></app-hello-world>

Komponenten organisieren und wiederverwenden

In einer größeren Anwendung können zahlreiche Komponenten erstellt werden, daher ist es wichtig, sie gut zu organisieren. Hier sind einige Best Practices zur Organisation von Komponenten:

1. Modulare Struktur: Gruppiere Komponenten, die thematisch zusammenpassen, in Modulen. Angular verwendet Module, um Komponenten, Direktiven und Services zu organisieren. So kannst du zusammengehörige Komponenten in einem gemeinsamen Modul bündeln.
2. Wiederverwendbare Komponenten: Erstelle Komponenten, die in mehreren Bereichen der Anwendung verwendet werden können. Zum Beispiel könnte eine `NavbarComponent` erstellt werden, die in verschiedenen Ansichten der Anwendung eingebunden wird.
3. Kommunikation zwischen Komponenten: Oft müssen Komponenten miteinander kommunizieren. Dafür gibt es in Angular zwei wichtige Ansätze:
   1. Input- und Output-Dekoratoren: Diese ermöglichen den Datenaustausch zwischen Eltern- und Kind-Komponenten.
   2. Services: Über Services können Komponenten Daten und Logik gemeinsam nutzen, ohne direkt miteinander verknüpft zu sein.

Beispiel: Erstellen einer `CardComponent`

Nehmen wir an, wir möchten eine wiederverwendbare Card-Komponente erstellen, die ein Bild, einen Titel und eine Beschreibung anzeigt. Hier ist ein einfaches Beispiel:

ng generate component card

HTML-Template (`card.component.html`):

<div class="card">
  <img [src]="imageUrl" alt="Bild">
  <h2>{{ title }}</h2>
  <p>{{ description }}</p>
</div>

TypeScript-Klasse (`card.component.ts`):

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css']
})
export class CardComponent {
  @Input() title: string;
  @Input() description: string;
  @Input() imageUrl: string;
}

Hier haben wir Input-Properties (`@Input()`), um Daten von der Eltern-Komponente an die `CardComponent` zu übergeben. Dies macht die Komponente flexibel und wiederverwendbar.

Einbinden der `CardComponent`:

In einer anderen Komponente könnte die `CardComponent` wie folgt verwendet werden:

<app-card
  [title]="'Angular lernen'"
  [description]="'Angular ist ein leistungsstarkes Framework für die Erstellung von Webanwendungen.'"
  [imageUrl]="'assets/angular.png'">
</app-card>

Fazit

Komponenten sind das Fundament jeder Angular-Anwendung. Sie ermöglichen es, die Benutzeroberfläche in kleine, übersichtliche und wiederverwendbare Bausteine zu unterteilen. Durch die Nutzung des Angular CLI zur Erstellung und Verwaltung von Komponenten sowie durch die konsequente Anwendung von Best Practices kannst du deine Anwendungen modular und wartungsfreundlich gestalten.