0
0
Angularframework~20 mins

Hydration behavior in Angular - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Hydration Mastery
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate
2:00remaining
What happens during Angular hydration?
When Angular hydrates a server-rendered app, what is the main behavior it performs?
AIt attaches event listeners to existing DOM elements without re-rendering them.
BIt completely re-renders the entire DOM from scratch, replacing server content.
CIt removes all server-rendered content and loads a blank page before rendering.
DIt only fetches new data but does not attach any event listeners.
Attempts:
2 left
💡 Hint

Think about how Angular preserves the server HTML but makes it interactive.

❓ state_output
intermediate
2:00remaining
State after hydration in Angular
After Angular hydrates a server-rendered component with initial state, what will be the value of a component's property bound to the template?
Angular
export class CounterComponent {
  count = 5;
  increment() {
    this.count++;
  }
}

// Server rendered with count=5, then hydrated on client.
AThe count property remains 5 and updates on user interaction.
BThe count resets to 0 after hydration.
CThe count becomes undefined after hydration.
DThe count doubles to 10 after hydration.
Attempts:
2 left
💡 Hint

Hydration preserves the initial state from the server.

📝 Syntax
advanced
2:00remaining
Identify the hydration error in Angular code
Which option contains code that will cause hydration to fail due to mismatched server and client DOM?
A
<div *ngIf="show">Hello</div>
<button (click)="toggle()">Toggle</button>
B
<div *ngIf="show">Hello</div>
<button (click)="toggle()">Toggle</button>
<p>{{count}}</p>
C
<div *ngIf="show">Hello</div>
<button (click)="toggle()">Toggle</button>
<p>{{count}}</p>
<p *ngIf="false">Hidden</p>
D
<div *ngIf="show">Hello</div>
<button (click)="toggle()">Toggle</button>
<p>{{count}}</p>
<p *ngIf="true">Visible</p>
Attempts:
2 left
💡 Hint

Look for elements rendered on client but missing on server or vice versa.

🔧 Debug
advanced
2:00remaining
Why does Angular hydration throw an error here?
Given this Angular component, hydration throws an error. What is the cause?
Angular
export class AppComponent {
  data: string | null = null;

  ngOnInit() {
    fetch('/api/data').then(res => res.text()).then(text => this.data = text);
  }
}

// Server renders with data=null, client fetches data after hydration.
AThe data property is not initialized, causing a runtime error.
BThe fetch call is synchronous and blocks hydration.
CThe component lacks a constructor, causing hydration failure.
DThe server and client DOM differ because data is null on server but filled after client fetch, causing mismatch.
Attempts:
2 left
💡 Hint

Think about when the DOM is generated on server vs client.

🧠 Conceptual
expert
3:00remaining
How does Angular handle event listeners during hydration?
Which statement best describes Angular's approach to event listeners when hydrating a server-rendered app?
AAngular ignores event listeners during hydration and adds them only on user interaction.
BAngular re-attaches event listeners only to elements that exist in the server-rendered DOM without recreating elements.
CAngular duplicates event listeners causing multiple triggers on the same event.
DAngular removes all event listeners and re-adds them after fully re-rendering the DOM.
Attempts:
2 left
💡 Hint

Consider how Angular makes the static server HTML interactive without rebuilding it.