Hydration behavior in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens during Angular hydration?

When Angular hydrates a server-rendered app, what is the main behavior it performs?

A It attaches event listeners to existing DOM elements without re-rendering them.

B It completely re-renders the entire DOM from scratch, replacing server content.

C It removes all server-rendered content and loads a blank page before rendering.

D It only fetches new data but does not attach any event listeners.

💡 Hint

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

Hydration means Angular reuses the server-rendered HTML and attaches event listeners so the app becomes interactive without re-rendering the whole page.

❓ state_output

intermediate

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.

A The count property remains 5 and updates on user interaction.

B The count resets to 0 after hydration.

C The count becomes undefined after hydration.

D The count doubles to 10 after hydration.

💡 Hint

Hydration preserves the initial state from the server.

Angular hydration keeps the initial property values as rendered on the server, so count stays 5 until user changes it.

📝 Syntax

advanced

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>

💡 Hint

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

Having an element with *ngIf="false" on client but missing on server causes DOM mismatch, breaking hydration.

🔧 Debug

advanced

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.

A The data property is not initialized, causing a runtime error.

B The fetch call is synchronous and blocks hydration.

C The component lacks a constructor, causing hydration failure.

D The server and client DOM differ because data is null on server but filled after client fetch, causing mismatch.

💡 Hint

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

Server renders with data=null, so the DOM is missing the fetched content. Client updates data after hydration, causing mismatch and error.

🧠 Conceptual

expert

How does Angular handle event listeners during hydration?

Which statement best describes Angular's approach to event listeners when hydrating a server-rendered app?

A Angular ignores event listeners during hydration and adds them only on user interaction.

B Angular re-attaches event listeners only to elements that exist in the server-rendered DOM without recreating elements.

C Angular duplicates event listeners causing multiple triggers on the same event.

D Angular removes all event listeners and re-adds them after fully re-rendering the DOM.

💡 Hint

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

Angular attaches event listeners to existing DOM elements during hydration to avoid re-creating the DOM and improve performance.

Practice

1. What does hydration do in Angular applications?

easy

A. It connects server-rendered HTML with Angular on the client to make pages interactive faster.

B. It compiles Angular templates into JavaScript code.

C. It minifies Angular application code for production.

D. It disables client-side rendering to improve performance.

Solution

1. Step 1: Understand hydration purpose

   Hydration links the static HTML generated on the server with Angular's client-side logic.

2. Step 2: Identify hydration effect

   This process makes the page interactive quickly without reloading or re-rendering all content.

3. Final Answer:

   It connects server-rendered HTML with Angular on the client to make pages interactive faster. -> Option A

4. Quick Check:

   Hydration = Connect server HTML + client Angular [OK]

Hint: Hydration means linking server HTML with client Angular [OK]

Common Mistakes:

• Confusing hydration with code compilation
• Thinking hydration disables client rendering
• Assuming hydration minifies code

2. Which is the correct way to enable hydration in an Angular standalone app?

easy

A. bootstrapApplication(AppComponent, { enableHydration: true });

B. bootstrapApplication(AppComponent, { hydrate: true });

C. bootstrapApplication(AppComponent, { providers: [provideClientHydration()] });

D. bootstrapApplication(AppComponent, { hydrationEnabled: true });

Solution

1. Step 1: Recall Angular hydration option

   The official way to enable hydration is { providers: [provideClientHydration()] } in bootstrapApplication.

2. Step 2: Match syntax with options

   Only bootstrapApplication(AppComponent, { providers: [provideClientHydration()] }); uses the correct configuration and syntax.

3. Final Answer:

   bootstrapApplication(AppComponent, { providers: [provideClientHydration()] }); -> Option C

4. Quick Check:

   Hydration via provideClientHydration() [OK]

Hint: Use 'providers: [provideClientHydration()]' in bootstrapApplication [OK]

Common Mistakes:

• Using incorrect option names like 'enableHydration'
• Misspelling 'hydration' option
• Placing hydration option outside bootstrapApplication

3. Given this code snippet, what will happen when hydration is enabled?

bootstrapApplication(AppComponent, { providers: [provideClientHydration()] });

Assuming AppComponent renders server HTML, what is the expected behavior on the client?

medium

A. Angular will attach event listeners and make the existing server HTML interactive without full re-render.

B. Angular will ignore the server HTML and load a blank page.

C. Angular will re-render the entire component from scratch on the client.

D. Angular will throw a runtime error because hydration is experimental.

Solution

1. Step 1: Understand hydration effect on client

   With hydration enabled, Angular reuses server-rendered HTML and attaches client logic without full re-render.

2. Step 2: Analyze options

   Angular will attach event listeners and make the existing server HTML interactive without full re-render. correctly describes this behavior; others describe re-render, error, or ignoring HTML which are incorrect.

3. Final Answer:

   Angular will attach event listeners and make the existing server HTML interactive without full re-render. -> Option A

4. Quick Check:

   Hydration = reuse server HTML + add interactivity [OK]

Hint: Hydration attaches interactivity, no full re-render [OK]

Common Mistakes:

• Thinking hydration causes full re-render
• Assuming hydration disables client logic
• Believing hydration causes errors by default

4. You enabled hydration with providers: [provideClientHydration()] but the client app still re-renders everything. What is a likely cause?

medium

A. You must disable client-side rendering for hydration to work.

B. Hydration requires a special Angular module to be imported.

C. Hydration only works with AngularJS, not Angular.

D. The server HTML does not match the client component's rendered output.

Solution

1. Step 1: Understand hydration requirements

   Hydration requires server HTML to exactly match client output to reuse it without re-render.

2. Step 2: Identify mismatch effect

   If server and client HTML differ, Angular must re-render to fix inconsistencies, causing full re-render.

3. Final Answer:

   The server HTML does not match the client component's rendered output. -> Option D

4. Quick Check:

   Mismatch server/client HTML causes re-render [OK]

Hint: Mismatch server/client HTML breaks hydration [OK]

Common Mistakes:

• Thinking hydration needs special modules
• Confusing AngularJS with Angular hydration
• Disabling client rendering breaks hydration

5. You want to optimize your Angular app's startup by using hydration. Which combination of steps is best to ensure hydration works correctly and improves performance?

hard

A. Enable hydration: true, disable server-side rendering, and load all data only on client.

B. Enable providers: [provideClientHydration()] in bootstrapApplication, ensure server and client HTML match exactly, and avoid client-only dynamic content during initial render.

C. Use hydration: true and manually call detectChanges() after bootstrap to force update.

D. Enable hydration: true and use ChangeDetectionStrategy.OnPush everywhere to prevent re-renders.

Solution

1. Step 1: Enable hydration properly

   Use providers: [provideClientHydration()] in bootstrapApplication to activate hydration.

2. Step 2: Ensure server/client HTML match and avoid client-only dynamic content

   Matching HTML is essential for hydration to reuse server output. Avoid client-only content that breaks this match.

3. Step 3: Understand why other options fail

   Disabling SSR or forcing detectChanges breaks hydration benefits; OnPush alone doesn't guarantee hydration correctness.

4. Final Answer:

   Enable hydration, ensure matching HTML, avoid client-only dynamic content initially. -> Option B

5. Quick Check:

   Hydration + matching HTML + stable initial render = best performance [OK]

Hint: Match server/client HTML and enable hydration [OK]

Common Mistakes:

• Disabling SSR breaks hydration benefits
• Forcing detectChanges unnecessarily
• Relying only on OnPush without matching HTML