AngularAtlasAusg. 22.2

Kap. 01Start03 / 75

Schnelle Entscheidungen

„Wohin damit?“, „Signal oder Observable?“, „Shared oder Feature?“ — kurze Antworten auf Alltagsfragen.

Architektur ~0 Min. Lesezeit

Die Fragen, die du dir zehnmal am Tag stellst — mit einer kurzen Antwort und einem Link zur Seite, die sie ausführlich erklärt. Suche nach einem Wort oder filtere nach Kategorie.

Die Prinzipien hinter allen Antworten

  1. So nah wie möglich an der Verwendung

    Typen, Komponenten und Zustand bleiben neben dem Code, der sie nutzt; du hebst sie erst an, wenn ein neuer Konsument auftaucht.

  2. Eine einzige Quelle der Wahrheit

    Was sich berechnen lässt, wird abgeleitet (computed), nicht gespeichert.

  3. Das einfachste Werkzeug, das das Problem löst

    @switch vor dynamischen Komponenten, ein Signal-basierter Service vor NgRx, Duplikation vor der falschen Abstraktion.

  4. Immutability

    Neue Referenzen für neue Daten — Signals und OnPush hängen davon ab.

Fragen und Antworten

41 von 41 Fragen

01

Komponenten

7

Ist meine Komponente Smart oder Dumb?

Wenn sie Stores / APIs / den Router injiziert → Smart (Seite oder Container). Wenn sie alles über Inputs erhält und Outputs emittiert → Dumb. Geroutete Seiten sind Smart; den Rest hältst du so weit wie möglich Dumb.

Smart vs. Dumb

Wann mache ich sie generisch (<T>)?

Wenn du schon 2–3 Verwendungen mit DEMSELBEN Verhalten auf unterschiedlichen Daten hast (Tabelle, Select, Liste) und die API keine Fachbegriffe enthält. Sonst bleibt sie spezifisch.

Generische Komponenten <T>

Wann mache ich sie dynamisch?

Nur wenn du zur Compile-Zeit nicht weißt, welche Komponente erscheint (Config, CMS, Plugins, Dashboard). Für 2–5 bekannte Varianten nimm @switch.

Dynamische Komponenten

input + output oder model()?

model() für „Steuer“-Werte (Toggle, Slider, aktiver Tab). input + output, wenn die Elternkomponente entscheiden/validieren muss oder das Event eine Bedeutung hat (save, delete).

model() — Two-Way-Binding

ng-content oder ng-template?

ng-content für statischen Inhalt, der einmal angezeigt wird. ng-template, wenn der Inhalt lazy erzeugt, wiederholt werden oder Daten (Kontext) erhalten soll.

Content Projection

Komponente oder Direktive?

Direktive, wenn du einem bestehenden Element nur Verhalten hinzufügst (Tooltip, Autofokus). Komponente, wenn du eigenes Markup oder eigene Styles hast.

Direktiven & Host-Komposition

Projektion oder Inputs für Inhalte?

Inputs, wenn die Komponente das Aussehen bestimmt (Konsistenz). Projektion, wenn die Elternkomponente freies Markup braucht (Dialoge, Karten).

Content Projection
02

Architektur

7

Komponente nach shared verschieben?

Nur wenn sie JETZT in 2+ Features genutzt wird, keine Fachbegriffe enthält, keine Daten injiziert und überall gleich funktioniert. Sonst lebt sie in features/x/ui.

Shared vs. Feature

Interface inline oder in eigener Datei?

Nur von einer Datei genutzt → inline. Input-/Output-Typ → aus der Komponentendatei exportiert. Von mehreren Dateien eines Features genutzt → features/x/models. Zwischen Features → die öffentliche API des Besitzers.

Interfaces & Modelle

Eigenes DTO neben dem Modell?

Ja, wenn die API andere Konventionen nutzt, du sie nicht kontrollierst oder die UI abgeleitete Felder hat. Nein, bei einfachem CRUD mit bereits sauberen Typen.

Interfaces & Modelle

Was kommt in core?

Dinge, die einmal auf Anwendungsebene oder als Infrastruktur gebraucht werden: Auth, Layout (Shell), ErrorHandler, Interceptors, übergreifende Services.

Ordnerstruktur

Darf ich ein Feature aus einem anderen importieren?

Am besten nicht. Kommuniziere über die URL, einen Store in core oder shared. Wenn es unvermeidbar ist: nur über die öffentliche API (index.ts) des anderen Features.

Barrels, Aliase & Grenzen

Barrel (index.ts) überall?

Nein. Nur an der Grenze eines Features bzw. einer Bibliothek, als öffentliche API. Im Inneren importierst du Dateien direkt.

Barrels, Aliase & Grenzen

Enum oder String-Union?

Union + as-const-Objekt. Einfacher, tree-shakable, leicht in Templates zu iterieren.

Interfaces & Modelle
03

State & Daten

7

Wann nutze ich effect()?

Nur für Effekte nach außen: localStorage, Logging, imperative Bibliotheken, das DOM. Niemals, um ein anderes Signal zu setzen (→ computed / linkedSignal).

effect() — wann ja, wann nein

Signal oder Observable?

Signal für angezeigten Zustand. Observable für Event-Streams über die Zeit (Websocket, Drag, komplexe Operatoren). Die Brücke: toSignal / toObservable.

Signals ↔ RxJS

Wie lade ich Daten vom Server?

Reaktives Lesen → httpResource (oder resource / rxResource). Schreiben (POST/PUT/DELETE) → HttpClient, danach die Resource aktualisieren bzw. neu laden.

resource, rxResource, httpResource

Wo halte ich den Zustand?

So weit unten wie möglich: Komponente → Feature-Store (Provider an Route/Seite) → global (@Service in root). Teilbare Filter → die URL.

State Management mit Signals

Brauche ich NgRx?

Meistens nicht: Ein Service mit Signals reicht. NgRx SignalStore, wenn du Konventionen/Plugins willst; NgRx Store, wenn du ein Action-Log und Time-Travel brauchst.

State Management mit Signals
04

Template

5

Methode, Pipe oder computed im Template?

computed für Berechnungen, die zur Komponente gehören; eine reine Pipe für wiederverwendbare Formatierung; eine Methode nur für Triviales (sie läuft bei jedem Rendering).

Pipes: wann und wie

Was gebe ich bei track in @for an?

Eine stabile ID (track item.id). $index nur für statische Listen. Identität (track item) nur, wenn die Objekte nicht neu erzeugt werden.

Control Flow: @if, @for, @switch

ngClass oder [class]?

[class.x] / [class] — nativ, ohne Import, schneller. Migration: ng g @angular/core:ngclass-to-class.

Class- & Style-Bindings
05

DI

5

@Service() oder @Injectable()?

Neuer Code in v22: @Service() (automatisch bereitgestellter Singleton, nur inject()). @Injectable, wenn du DI über den Constructor nutzt oder ältere Versionen unterstützen musst.

inject() & @Service()

Wo stelle ich den Service bereit?

In root, wenn der Zustand die Navigation überleben muss. An Route/Seite für Feature-Zustand. An der Komponente für eine Instanz pro Komponente (Wizard, Editor).

Provider & die Injector-Hierarchie

Klasse oder InjectionToken?

Klasse, wenn du Logik/Methoden hast. InjectionToken für Werte: Config, URLs, Funktionen, Plugins (multi).

InjectionToken & provideX()

Interface für den Service (IUserService)?

Nein. Brauchst du mehrere Implementierungen oder Mocks: eine abstrakte Klasse als Token, mit @Service({ factory }) für die Standardimplementierung.

inject() & @Service()
06

Formulare & Routing

6

Signal Forms oder Reactive Forms?

Neue Formulare in v22 → Signal Forms. Bestehende Reactive-Formulare bleiben; du migrierst schrittweise mit SignalFormControl / compatForm.

Signal Forms — die Grundlagen

Eigenes Control: FormValueControl oder CVA?

FormValueControl für Signal Forms (ein model() + optionale Inputs). ControlValueAccessor für Reactive / Template-driven.

Eigene Formular-Controls

Resolver oder httpResource?

Resolver für kleine, zwingend nötige Daten. httpResource + Skeleton für Listen und Dashboards (sofortige Navigation).

Guards & Resolver

canMatch oder canActivate?

canMatch für gesperrte Bereiche (lädt den Chunk nicht herunter). canActivate für Prüfungen beim Betreten einer Route, die für alle existiert.

Guards & Resolver

Eigene Route oder Zustand in der Seite?

Eine Route, wenn der Screen einen eigenen Link braucht (teilbar, Zurück-Button). Lokaler Zustand für Dialoge, Dropdowns und flüchtige Schritte.

Modernes Routing & Lazy Loading

Wie lese ich Route-Parameter?

withComponentInputBinding() + input() in der gerouteten Komponente. Kein ActivatedRoute und kein subscribe.

Modernes Routing & Lazy Loading
07

Qualität

4

Warum aktualisiert sich die UI nicht?

Fast sicher: Ein einfaches Feld wurde asynchron geändert (setTimeout, subscribe) in einer zoneless/OnPush-App, oder ein Objekt wurde mutiert. Wechsle zu Signals und immutablen Updates.

Change Detection

Wo behandle ich Fehler?

Vorhersehbare → lokal (resource.error()). Übergreifende (401/500) → Interceptor. Rendering-Fehler in einem Bereich → @boundary. Der Rest → globaler ErrorHandler.

Fehler: @boundary & ErrorHandler

Was teste ich, und wie?

Stores und Mapper: Unit-Tests, ohne DOM. Dumb-Komponenten: createComponent + Bindings. Seiten: Fake-Store + HttpTestingController. Abläufe: E2E.

Testen mit Vitest

Sind meine eigenen Komponenten barrierefrei?

Baue sie auf Angular Aria (headless) auf: Tastatur, Fokus und korrektes ARIA; das Styling bleibt deine Sache.

Angular Aria

Kap. 01 · 0 von 4 abgeschlossen

Lektion abgeschlossen?

Markiere sie, dann erscheint sie auf deiner Karte: im Inhaltsverzeichnis und auf der Startseite.

Wird automatisch markiert, sobald du die ganze Lektion gelesen hast.

  1. Was ist neu in Angular 21 & 22
  2. Deine erste App, Schritt für Schritt
  3. Schnelle Entscheidungen
  4. Angular-Interviewfragen
Deine ganze Karte ansehen
esc

Alle 75 Seiten · tippen zum Filtern

  • 01Was ist neu in Angular 21 & 22Alle wichtigen Änderungen in v21 und v22 in Kürze, mit Link zur Seite, die sie jeweils erklärt.Start
  • 01Deine erste App, Schritt für SchrittEine Leseliste, von einer leeren Komponente bis zur fertigen App — Signals, @for, Inputs und Outputs, ein Service und ein Formular, Schritt für Schritt.Start
  • 01Schnelle Entscheidungen„Wohin damit?“, „Signal oder Observable?“, „Shared oder Feature?“ — kurze Antworten auf Alltagsfragen.Start
  • 01Angular-Interviewfragen60 echte Interviewfragen für Junior, Mid und Senior, mit der passenden Antwort, der Nachfrage und den Warnsignalen. Dazu ein Probeinterview.Start
  • 02Standalone & BootstrapWie eine App ohne NgModule startet: bootstrapApplication, app.config.ts, imports in der Komponente.Moderne Grundlagen
  • 02Data Binding & EventsInterpolation, Property- und Attribut-Bindings, Events mit $event und Tastenfiltern und wie [( )] aufgebaut ist — was in das DOM geht und was zurückkommt.Moderne Grundlagen
  • 02Control Flow: @if, @for, @switchDie Block-Syntax, die *ngIf/*ngFor/ngSwitch ersetzt, mit track, @empty und Exhaustive Checks.Moderne Grundlagen
  • 02@let und die neuen Template-AusdrückeLokale Variablen mit @let, Arrow Functions, Spread, Regex, instanceof, Kommentare in Tags.Moderne Grundlagen
  • 02@defer — Lazy Loading in TemplatesSchwere Komponenten nur laden, wenn sie gebraucht werden: Trigger, Prefetch, Placeholder, Loading, Error.Moderne Grundlagen
  • 02Class- & Style-BindingsWarum [class.x] und [style.x] ngClass und ngStyle abgelöst haben (mit automatischer Migration ab v21).Moderne Grundlagen
  • 02Komponenten-Styles & Kapselung:host, die drei Kapselungsmodi, Theming mit CSS-Variablen und warum ::ng-deep der letzte Ausweg ist.Moderne Grundlagen
  • 02Pipes: wann und wiePure vs. Impure Pipes, eigene Pipes und wie du zwischen Pipe, computed() und Methode wählst.Moderne Grundlagen
  • 03signal() und computed()Die reaktiven Grundbausteine: beschreibbarer Zustand, abgeleiteter Zustand, Gleichheit, untracked und Regeln zur Immutability.Signals & Reaktivität
  • 03effect() — wann ja, wann neinMit Signals synchronisierte Seiteneffekte: localStorage, Logging, imperative APIs. Und ihre Stolperfallen.Signals & Reaktivität
  • 03linkedSignal() — editierbarer abgeleiteter ZustandEin Signal, das sich zurücksetzt, wenn sich seine Quelle ändert, das du aber auch manuell setzen kannst.Signals & Reaktivität
  • 03resource, rxResource, httpResourceAsynchrone Daten als Signals: status, value, error, reload, automatischer Abbruch. Stabil seit v22.Signals & Reaktivität
  • 03debounced() — verzögerte SignalsDie „Debounce“-Variante eines Signals, ohne RxJS. Perfekt für die Suche.Signals & Reaktivität
  • 03Listen: suchen, filtern, sortieren, blätternEine Kette von computed-Signals, die nur neu berechnet, was sich geändert hat — mit den Filtern in der URL, damit ein Link dieselbe Ansicht öffnet.Signals & Reaktivität
  • 03Observables von null anWas ein Observable ist, subscribe und unsubscribe, die Operatoren, die du jede Woche brauchst, cold vs. hot — und wann ein Signal reicht.Signals & Reaktivität
  • 03Signals ↔ RxJStoSignal, toObservable, takeUntilDestroyed, outputFromObservable — und wann RxJS weiterhin die richtige Wahl bleibt.Signals & Reaktivität
  • 04input() und output()Inputs als Signals (required, transform, alias) und typisierte Outputs. Daten nach unten, Events nach oben.Komponenten: Kommunikation
  • 04model() — Two-Way-BindingBanana-in-a-Box [( )] mit einer einzigen API. Wann du es nutzt und wann input + output besser ist.Komponenten: Kommunikation
  • 04viewChild & contentChildQueries als Signals: viewChild, viewChildren, contentChild, contentChildren, die Option read.Komponenten: Kommunikation
  • 04Lifecycle & DestroyRefWelche Hooks in der Signals-Ära noch zählen, afterNextRender, DestroyRef und typisiertes ngOnChanges.Komponenten: Kommunikation
  • 04Content Projectionng-content mit select, mehrere Slots, Standardinhalt und die Falle der bedingten Projektion.Komponenten: Kommunikation
  • 04ng-template & ngTemplateOutletTemplates als Werte: Render Props in Angular, typisierter Kontext und Anpassen von Komponenten.Komponenten: Kommunikation
  • 05Smart vs. DumbContainer vs. Presentational: wer den Zustand hält, wer nur anzeigt und wie du die beiden sauber trennst.Komponenten-Design
  • 05Generische Komponenten <T>Eine korrekt typisierte DataTable<T> oder Select<T>, mit Templates für Zellen.Komponenten-Design
  • 05Dynamische KomponentenNgComponentOutlet, createComponent mit inputBinding/outputBinding und ein Dashboard, das aus einer Konfiguration gebaut wird.Komponenten-Design
  • 05Direktiven & Host-KompositionAttribut-Direktiven, die host: {}-Metadaten und die Directive Composition API (hostDirectives).Komponenten-Design
  • 05Eigene Formular-ControlsFormValueControl (Signal Forms) vs. ControlValueAccessor: eine Sternebewertung, in beiden Varianten.Komponenten-Design
  • 05Change DetectionOnPush ist ab v22 der Standard, zone.js entfällt ab v21. Was das Rendering auslöst und wie du dir nicht die Finger verbrennst.Komponenten-Design
  • 06inject() & @Service()Der neue @Service()-Decorator ab v22, inject() vs. Konstruktor und der Injection-Kontext.Dependency Injection
  • 06Provider & die Injector-HierarchieRoot vs. Route vs. Komponente, useClass/useValue/useFactory/useExisting und die Modifier optional/self/skipSelf.Dependency Injection
  • 06InjectionToken & provideX()Typisierte Konfiguration, provideFeature()-Funktionen, makeEnvironmentProviders und Initializer.Dependency Injection
  • 06injectAsync() — Lazy ServicesLade einen schweren Service erst, wenn du ihn brauchst, mit Prefetch im Leerlauf.Dependency Injection
  • 07Ordnerstrukturcore / shared / features, was in welchen Ordner gehört und wie ein Feature von innen aussieht.Architektur der Anwendung
  • 07Shared vs. FeatureWann du eine Komponente nach Shared verschiebst und (vor allem) wann NICHT. Eine konkrete Checkliste.Architektur der Anwendung
  • 07Interfaces & ModelleInline-Interface oder eigene Datei? DTO vs. Domänenmodell, type vs. interface, wohin damit.Architektur der Anwendung
  • 07State Management mit SignalsEinfache Signal-Stores, Fassaden, lokaler vs. globaler Zustand und wann du NgRx brauchst.Architektur der Anwendung
  • 07Styleguide & NamensgebungDie aktuellen offiziellen Konventionen: Dateinamen ohne Suffixe, protected, readonly, Reihenfolge der Member.Architektur der Anwendung
  • 07Barrels, Aliase & Grenzenindex.ts, Pfad-Aliase, die öffentliche API eines Features und Abhängigkeitsregeln, die sich automatisch prüfen lassen.Architektur der Anwendung
  • 07Fehler: @boundary & ErrorHandlerDer neue @boundary-Block ab v22.2, der globale ErrorHandler, HTTP-Fehler und Fehler aus resource.Architektur der Anwendung
  • 08Modernes Routing & Lazy LoadingloadComponent, Child Routes, Parameter als Inputs und Parameter-Vererbung (neuer Standard in v22).Routing
  • 08Guards & ResolvercanActivate, canMatch, canDeactivate und resolve als Funktionen, mit Redirects über UrlTree / RedirectCommand.Routing
  • 09Signal Forms — die GrundlagenFormulare auf Basis von Signals: form(), [formField], schemabasierte Validierung. Stabil seit v22.Formulare
  • 09Signal Forms — fortgeschrittenEigene und feldübergreifende Validierung, async/HTTP mit Debounce, dynamische Listen, disabled/hidden, wiederverwendbare Schemas.Formulare
  • 09Typisierte Reactive FormsTypisierte FormGroup, nonNullable, FormArray — und wie sie neben Signal Forms bestehen.Formulare
  • 10HttpClient, Interceptors & die API-SchichtHttpClient ohne Setup (v21), Fetch als Standard (v22), funktionale Interceptors und eine API-Schicht mit DTO-Mapping.HTTP & Daten
  • 11Performance — eine ChecklisteWas wirklich zählt: OnPush + Signals, track, @defer, Lazy Routes, Bilder, Bundles und Hydration.Qualität & Performance
  • 11Testen mit VitestVitest ist ab v21 der Standard-Runner. TestBed, Komponenten mit Signals, Services, HTTP und Harnesses.Qualität & Performance
  • 11DevTools: ein Blick in deine AppChrome DevTools und Angular DevTools Schritt für Schritt: was jedes Panel zeigt, mit Übungen, die auf dieser Website funktionieren.Qualität & Performance
  • 11Angular AriaHeadless, barrierefreie Komponenten, die du nach Belieben stylst: Tabs, Accordion, Menü, Listbox...Qualität & Performance
  • 12SSR, Prerendering & Render ModesWann auf dem Server gerendert wird, wann beim Build und wann nur im Browser: RenderMode pro Route, app.routes.server.ts und die echten Kosten.SSR & Hydration
  • 12Hydration: Event Replay & inkrementellWie der Browser das Server-HTML übernimmt, ohne es neu zu rendern: vollständige Hydration, Event Replay, @defer (hydrate on …) und Mismatch-Fehler.SSR & Hydration
  • 12Servertauglicher Codewindow gibt es auf dem Server nicht: PLATFORM_ID, afterNextRender, DOCUMENT, TransferState, der HTTP-Cache und PendingTasks.SSR & Hydration
  • 13Micro FrontendsWann es sich lohnt, eine App in mehrere Deployments aufzuteilen und wann es nur Komplexität ist: Native Federation, Module Federation, iframes, Web Components.Architektur im großen Maßstab
  • 13Web Components mit Angular ElementscreateCustomElement: eine Angular-Komponente, die überall als HTML-Tag nutzbar ist, plus Kommunikation zwischen Apps über Events und BroadcastChannel.Architektur im großen Maßstab
  • 13Monorepo, Bibliotheken & GrenzenEin Workspace mit mehreren Apps und Bibliotheken: ng generate library, Nx, Secondary Entry Points, Publishing und Abhängigkeitsregeln.Architektur im großen Maßstab
  • 13Hexagonale Architektur (Ports & Adapters)Eine Domäne ohne Angular, Ports als abstrakte Klassen und austauschbare Adapter: HTTP, localStorage oder In-Memory, ohne die UI anzufassen.Architektur im großen Maßstab
  • 14Signals unter der HaubeDer reaktive Graph: Producer und Consumer, Push-Pull, warum computed lazy und glitch-frei ist, das Diamond-Problem und wann Effects laufen.Fortgeschrittene Reaktivität
  • 14Fortgeschrittenes RxJS: Operatoren höherer OrdnungswitchMap, mergeMap, concatMap und exhaustMap an einem Live-Diagramm, dazu Retry mit Backoff, shareReplay und wie du Leaks vermeidest.Fortgeschrittene Reaktivität
  • 14NgRx SignalStoreState Management im großen Stil auf Signals: withState, withComputed, withMethods, rxMethod, Entities und Hooks — und wann ein einfacher Store reicht.Fortgeschrittene Reaktivität
  • 14Zustandsautomaten mit SignalsKeine unmöglichen Zustände mehr: ein typisierter Automat auf Signals, mit Übergängen, Guards und einem Live-Zustandsdiagramm.Fortgeschrittene Reaktivität
  • 15WebSockets: Echtzeit, die das Netz überstehtEin typisierter Socket als Signals: Reconnect mit Backoff und Jitter, Heartbeat, ein Postausgang im Offline-Modus und SSR-Sicherheit.Echtzeit & offline
  • 15Optimistische Updates & RollbackEine sofortige UI, die ehrlich bleibt: Snapshot und Rollback, Antworten in falscher Reihenfolge, Idempotenzschlüssel.Echtzeit & offline
  • 15Offline-first: Service Worker & CachingDer Angular Service Worker: Caching-Strategien, Update-Hinweise und ein Postausgang für Änderungen, die offline entstehen.Echtzeit & offline
  • 16Web WorkersSchwere Berechnungen, ohne die UI zu blockieren: ein echter Worker in der Seite, Message Passing und wann es sich nicht lohnt.Fortgeschrittene UI & Performance
  • 16Riesige Listen: Virtual Scroll100.000 Zeilen ohne Ruckeln: CDK Virtual Scroll, itemSize, trackBy und die Alternativen (Paginierung, Infinite Scroll).Fortgeschrittene UI & Performance
  • 16Moderne Animationen & View Transitionsanimate.enter und animate.leave statt des veralteten @angular/animations, CSS-Transitions und View Transitions bei der Navigation.Fortgeschrittene UI & Performance
  • 16Memory Leaks finden und behebenSubscriptions, Timer und Listener, die ihre Komponente überleben – wie du sie in den DevTools findest und schließt.Fortgeschrittene UI & Performance
  • 17Sicherheit: XSS, Sanitizing & CSPWas Angular automatisch gegen XSS tut, wann bypassSecurityTrust gefährlich wird, dazu CSP mit Nonce, Trusted Types und XSRF.Sicherheit & Globalisierung
  • 17Authentifizierung: Tokens & RefreshEin Interceptor, der das Token anhängt, bei 401 einmal erneuert und die wartenden Requests wiederholt — dazu, wo du das Token aufbewahrst.Sicherheit & Globalisierung
  • 17OAuth 2.1 & OpenID Connect mit PKCEDer Authorization-Code-Flow mit PKCE Schritt für Schritt: Verifier und Challenge, State und Nonce, das ID-Token und warum ein BFF sicherer ist.Sicherheit & Globalisierung
  • 17Internationalisierung (i18n)$localize, das i18n-Attribut, ICU plural/select, ein Build pro Sprache vs. Übersetzungen zur Laufzeit und Formatierung nach Locale.Sicherheit & Globalisierung