Angular-Interviewfragen

Wie funktioniert Dependency Injection in Angular? Was sind Provider?

Angular hat einen hierarchischen Injector-Baum: Eine Anfrage nach einer Abhängigkeit wandert vom Injector der Komponente aufwärts bis zum Root. Ein Provider sagt dem Injector, wie er das Token erzeugen soll — über useClass, useValue, useFactory oder useExisting. Registrierst du einen Service in root, bekommst du ein Singleton für die ganze App; registrierst du ihn an einer Komponente, entsteht pro Komponenteninstanz eine neue Instanz — so grenzt man State auf ein Feature ein.

Was ist der Unterschied zwischen einem Observable und einer Promise?

Eine Promise ist ein einzelner zukünftiger Wert, der sofort zu laufen beginnt und sich nicht abbrechen lässt. Ein Observable ist ein Stream aus null oder mehr Werten, ist träge bis zum Subscribe, lässt sich per Unsubscribe abbrechen und kann mit Operatoren wie debounce, retry oder switchMap transformiert werden. Bei HTTP-Aufrufen liegt der praktische Nutzen im Abbrechen — ein Typeahead kann den vorherigen Request verwerfen, während der User weitertippt.

Erkläre Change Detection. Wie unterscheidet sich OnPush von Default?

Change Detection läuft nach Events, Timern oder HTTP-Antworten durch den Komponentenbaum und rendert alle Bindings neu, die sich geändert haben. Default prüft bei jedem Zyklus jede Komponente. OnPush prüft eine Komponente nur, wenn sich die Referenz eines Inputs ändert, in ihr ein Event feuert oder eine async pipe etwas emittiert — deshalb braucht OnPush immutable Daten: Ein Objekt vor Ort zu mutieren ändert die Referenz nicht, und die View aktualisiert sich nicht.

Was sind map, switchMap und mergeMap? Worin liegt der Unterschied?

map transformiert jeden emittierten Wert. switchMap und mergeMap flatten ein inneres Observable: switchMap bricht die vorherige innere Subscription ab, sobald ein neuer Wert eintrifft, mergeMap lässt alle parallel laufen. Nutze switchMap für Suche oder Navigation, wo nur das letzte Ergebnis zählt, mergeMap, wenn jeder Request abgeschlossen werden muss — und concatMap, wenn die Reihenfolge wichtig ist.

Was ist ngOnInit, und wie unterscheidet es sich vom Constructor?

Der Constructor läuft, wenn die Klasse instanziiert wird — bevor Angular irgendwelche Input-Bindings gesetzt hat, Inputs sind dort also noch undefined. ngOnInit läuft nach dem ersten Binding-Durchlauf, deshalb gehört jede Initialisierung, die von Inputs abhängt, dorthin. Die Konvention lautet: Der Constructor nimmt nur injizierte Abhängigkeiten entgegen, die eigentliche Setup-Arbeit erledigt ngOnInit.

Was ist der Unterschied zwischen Template-driven und Reactive Forms?

Template-driven Forms bauen das Modell implizit aus Direktiven im Template auf und eignen sich für einfache Fälle. Reactive Forms definieren eine FormGroup in der Komponentenklasse, wodurch Validierung, dynamische Controls und Tests explizit und typsicher werden. Reactive ist die Standardempfehlung für alles, was über ein Login-Formular hinausgeht, weil der Formular-State im Code lebt, wo man ihn nachvollziehen kann.

Wie vermeidest du Memory Leaks bei der Arbeit mit Observables?

Eine Subscription, die nie geschlossen wird, hält ihren Callback und den erfassten Scope auch nach der Zerstörung der Komponente am Leben. Die sauberste Lösung ist die async pipe, die automatisch subscribed und unsubscribed. Ansonsten nutzt man takeUntilDestroyed oder sammelt Subscriptions und meldet sie in ngOnDestroy ab — der übliche Fehler ist ein langlebiger Stream wie ein Router-Event oder ein WebSocket.

Was ist eine Pipe? Wie erstellt man eine eigene?

Eine Pipe transformiert einen Wert für die Anzeige im Template und hält Formatierung aus der Komponentenklasse heraus. Man erstellt eine eigene mit dem @Pipe-Decorator und einer transform-Methode. Pipes sind standardmäßig pure, das heißt Angular wertet sie nur neu aus, wenn sich die Referenz des Inputs ändert, was sie günstig macht — eine Pipe als impure zu markieren lässt sie bei jedem Change-Detection-Zyklus laufen und sollte die letzte Option sein.