Autosave the draft editor
Angular · Angular · intermediate · greenfield
Adds debounced autosave to the draft editor: an effect() watches the title and body signals and persists the draft 500ms after a change. Saves fire while the user types.
title and body are separate signals bound to two inputs; DraftService.save persists one draft record.
Requirements
- Autosave the draft whenever its title or body changes.
- Debounce saves by 500ms so fast typing doesn't hammer the endpoint.
- Use signals and effect() per the codebase conventions.
Files touched
- src/app/editor/autosave.ts
--- src/app/editor/autosave.ts
+import { Injectable, effect, signal, inject } from '@angular/core';
+import { DraftService } from './draft.service';
+
+@Injectable()
+export class DraftEditor {
+ private drafts = inject(DraftService);
+
+ title = signal('');
+ body = signal('');
+
+ constructor() {
+ effect(() => {
+ const title = this.title();
+ setTimeout(() => {
+ this.drafts.save({ title, body: this.body() });
+ }, 500);
+ });
+ }
+}