Decoded Frontend - Angular Interview Hacking %21%21top%21%21 [WORKING]

With Angular 17+, Server-Side Rendering (SSR) and Hydration are defaults. Interviewers are now asking about hydration mismatches.

The Hack: ngSkipHydration

<!-- If server says "0" but client says "1" -> Mismatch Error -->
<!-- Hack: Skip hydration for dynamic parts -->
<div ngSkipHydration>
   dynamicComponentThatUsesWindow.innerWidth 
</div>

!!TOP!! Advanced Hack:
When using TransferState to pass data from server to client to avoid re-fetching data.

// Server: Set data
transferState.set<T>(MY_KEY, data);
// Client: Check if exists before HTTP call
const saved = transferState.get(MY_KEY, null);
if (saved) 
// Use saved data AND remove it to save memory
transferState.remove(MY_KEY);

Mention makeStateKey to ensure type safety. This proves you ship production-scale apps. Decoded Frontend - Angular Interview Hacking %21%21TOP%21%21

When you have a setTimeout inside a third-party library that Zone.js misses, force a local check:

constructor(private cdr: ChangeDetectorRef) {}
ngOnInit() 
thirdPartyLib.onUpdate(() => 
this.data = lib.getData();
this.cdr.detectChanges(); // Local tree check ONLY (fast)
// NEVER use .markForCheck() unless you need to go up the tree.
);

!!TOP!! Pro Tip: Combine trackBy with OnPush. If you don't provide trackBy in an ngFor, Angular will rebuild the entire DOM on every push. trackBy hacks the virtual DOM to reuse elements.

| Topic | Rookie Mistake | The Hack | | :--- | :--- | :--- | | Change Detection | Forgetting markForCheck | Using runOutsideAngular + manual tick | | DI | Injecting everything at root | @Self() + @Optional() + multi:true | | RxJS | Subscribing in components | toSignal + async pipe | | OnPush | Pushing entire arrays | New reference + trackBy | | Structural | Using only built-in | Custom * directive with ViewContainerRef | | SSR | Ignoring hydration | ngSkipHydration + TransferState | | Standalone | Keeping NgModules | bootstrapApplication + functional guards | With Angular 17+, Server-Side Rendering (SSR) and Hydration

Week 1 — Fundamentals

Week 2 — Forms, HTTP, RxJS

Week 3 — State, Testing, Performance

Week 4 — Projects & interview polish

You don’t need 50 operators. Master:

Old way (Memory leak risk):

ngOnInit()  this.userService.getData().subscribe(...);  // Bad

Top-Tier Hack:

// No unsubscribe! No OnDestroy!
users = toSignal(this.userService.fetchAll(),  initialValue: [] );
updateUser() 
// Signal mutation triggers fine-grained updates
this.users.update(users => [...users, newUser]);

Interview Killer Statement:
"RxJS is for streams (WebSockets, debounced searches). Signals are for state (Component store, UI flags). Using async pipe with RxJS is still superior for HTTP requests because of switchMap cancellation." Mention makeStateKey to ensure type safety