Hydration behavior in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable hydration in an Angular standalone component.

Angular

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `<button (click)="increment()">Count: {{ count() }}</button>`,
  hydrate: [1]
})
export class CounterComponent {
  count = signal(0);
  increment() {
    this.count.update(c => c + 1);
  }
}

Drag options to blanks, or click blank then click option'

Atrue

Bfalse

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Setting hydrate to false disables hydration.

Leaving hydrate undefined disables hydration.

Setting hydrate: true enables hydration for the component, allowing Angular to reuse server-rendered HTML on the client.

2fill in blank

medium

Complete the code to import the correct Angular hydration function.

Angular

import { [1] } from '@angular/platform-browser';

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

Drag options to blanks, or click blank then click option'

AprovideClientHydration

BprovideServerHydration

CenableHydration

DhydrateApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using provideServerHydration instead of provideClientHydration.

Using a non-existent function like enableHydration.

The function provideClientHydration is imported from @angular/platform-browser to enable client-side hydration.

3fill in blank

hard

Fix the error in the hydration setup by completing the bootstrap code.

Angular

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { [1] } from '@angular/platform-browser';

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

Drag options to blanks, or click blank then click option'

AenableHydration

BprovideServerHydration

CprovideClientHydration

DhydrateApp

Attempts:

3 left

💡 Hint

Common Mistakes

Importing provideServerHydration but calling provideClientHydration.

Using a function that does not exist.

Both import and usage require provideClientHydration to enable client hydration properly.

4fill in blank

hard

Fill both blanks to create a hydrated Angular component with a signal and hydration enabled.

Angular

import { Component, [1] } from '@angular/core';

@Component({
  selector: 'app-message',
  standalone: true,
  template: `<p>{{ message() }}</p>`,
  hydrate: [2]
})
export class MessageComponent {
  message = signal('Hello from hydrated component!');
}

Drag options to blanks, or click blank then click option'

Asignal

Beffect

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using effect instead of signal for state.

Setting hydrate to false disables hydration.

The signal function creates reactive state, and hydrate: true enables hydration for the component.

5fill in blank

hard

Fill all three blanks to create a hydrated Angular app bootstrap with client hydration and a standalone component.

Angular

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { [1] } from '@angular/platform-browser';

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<h1>{{ title }}</h1>`,
  hydrate: [3]
})
export class AppComponent {
  title = 'Hydrated Angular App';
}

Drag options to blanks, or click blank then click option'

AprovideClientHydration

BprovideServerHydration

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing client and server hydration functions.

Setting hydrate to false disables hydration.

Import and use provideClientHydration to enable client hydration, and set hydrate: true in the component decorator.