// persistent-note.component.ts
import { Component, signal, effect } from '@angular/core';

@Component({
  selector: 'app-persistent-note',
  standalone: true,
  template: `
    <input [value]="note()" (input)="note.set($any($event.target).value)" />
    <p>Saved note: {{ note() }}</p>
  `,
})
export class PersistentNoteComponent {
  // Read the saved value back as the initial value on creation.
  note = signal(localStorage.getItem('note') ?? '');

  constructor() {
    // Runs whenever note() changes — persists it automatically.
    effect(() => {
      localStorage.setItem('note', this.note());
    });
  }
}

/*
  Notes:
  - The signal's initial value is read from localStorage, so the note
    survives a page refresh — the same idea as the React
    useLocalStorage hook's lazy initializer.
  - The effect re-runs every time note() changes (auto-tracked, no
    dependency array), writing the new value to localStorage — the
    equivalent of React's useEffect(() => localStorage.setItem(...),
    [note]).
  - $any($event.target).value sidesteps TypeScript's generic
    EventTarget typing inline; a typed handler method would be cleaner
    in real code.
*/