Angular Academy · Lektion

Standalone Components erstellen

Deklarieren Sie Components mit dem standalone-Flag.

Standalone Components erstellen ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Eine Standalone Component erstellen

Eine Standalone Component ist einfach eine mit @Component dekorierte Klasse, die als standalone gekennzeichnet ist. In Angular v19+ ist dies die Standardeinstellung, daher schreiben Sie das Flag oft gar nicht.

Das standalone-Flag

Früher setzten Sie standalone: true im Decorator. Ab v19 sind Komponenten standardmäßig standalone, daher ist das Flag optional.

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

@Component({
  selector: 'app-greeting',
  standalone: true, // optional in v19+
  template: '<h1>Welcome</h1>'
})
export class GreetingComponent {}

Selector

Der selector ist das benutzerdefinierte Element-Tag, mit dem Sie die Komponente in einem Template platzieren, beispielsweise app-greeting.

// usage in another template:
// <app-greeting></app-greeting>

Inline-Template

Verwenden Sie die Eigenschaft template für inline eingefügtes HTML – ideal für kleine Komponenten.

@Component({
  selector: 'app-badge',
  template: '<span class="badge">New</span>'
})
export class BadgeComponent {}

Externes Template

Für größere Ansichten verwenden Sie templateUrl, um auf eine HTML-Datei zu verweisen.

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html'
})
export class ProfileComponent {}

Styles

Fügen Sie komponentenbezogene Styles mit styles (inline) oder styleUrl / styleUrls (externe Dateien) hinzu.

@Component({
  selector: 'app-card',
  template: '<div class="card"></div>',
  styles: ['.card { padding: 16px; }']
})
export class CardComponent {}

Logik der Component-Klasse

Der Klassenrumpf enthält Zustand und Verhalten. Mit Signals deklarieren Sie den reaktiven Zustand als Felder.

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

@Component({ selector: 'app-counter', template: '<p>{{ n() }}</p>' })
export class CounterComponent {
  n = signal(0);
}

Kein Modul erforderlich

Beachten Sie, dass es weder ein @NgModule noch ein declarations-Array gibt. Die Komponente kann überall dort importiert werden, wo sie benötigt wird.

Konvention für Dateinamen

Nach der Angular-Konvention heißen Dateien beispielsweise greeting.component.ts, die Klasse GreetingComponent und der Selector app-greeting.

Eine Komponente in einer anderen verwenden

Um eine untergeordnete Standalone Component zu verwenden, importieren Sie sie in das imports-Array der übergeordneten Komponente (Thema der nächsten Lektion) und platzieren ihren Selector im Template der übergeordneten Komponente.

Mit der CLI generieren

Die Angular CLI generiert standardmäßig Standalone Components. Mit ng generate component greeting erstellt sie für Sie eine Standalone-Komponente namens GreetingComponent.

Kurztest: Komponenten erstellen

Zu den Standardeinstellungen für Standalone Components.

Zusammenfassung: Standalone erstellen

Sie erstellen eine Standalone Component mit @Component und können optional standalone: true setzen (die Standardeinstellung ab v19). Sie definieren einen Selector, ein Template oder templateUrl, optionale Styles und die Logik der Klasse. Ein NgModule ist nicht erforderlich. Als Nächstes importieren Sie Abhängigkeiten direkt.

Häufig gestellte Fragen

Ist die Lektion „Standalone Components erstellen“ kostenlos?

Ja — der vollständige Text von „Standalone Components erstellen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Standalone Components erstellen“?

Deklarieren Sie Components mit dem standalone-Flag. Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Standalone Components erstellen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy