Angular Performance Tips

Event Replay

When users interact with the page before hydration is complete, Angular can capture and replay those events once the application becomes interactive.

Benefits:

No lost user interactions
Seamless user experience
Better perceived performance
Improved user confidence

Implementation:


// Enable event replay in app.config.ts
provideClientHydration({
  replayEvents: true
})

// Events are automatically captured and replayed
<button (click)="handleClick()">
  Click me during hydration!
</button>

Try clicking the cards before hydration is complete. Your clicks will be captured and replayed once the application becomes interactive.

Watch the console to see the events being replayed!

Don't forget to enable event replay in app.config.ts!