Romaji to Kana Converter: Angular & Express — Chapter 6, Exercise 3
=====================================================================

TASK
Build the final ConvertService (with isLoading and error signals) and
the styled RomajiInputComponent/KanaOutputComponent exactly as this
chapter describes. Confirm, using the real app: (a) a loading state
briefly appears while typing, (b) clearing the input shows the
placeholder text with no error, and (c) stopping the Express server
and typing shows the real error message, recovering correctly once
the server is restarted.

SOLUTION

Build src/app/convert.service.ts, src/app/romaji-input/romaji-input.
{ts,html,css}, src/app/kana-output/kana-output.{ts,html,css}, and
src/app/app.{html,css} exactly as shown in this chapter (all five
files copied verbatim). Then, with `npx nodemon server.js` and
`ng serve` both running:

(a) Loading state
  Type "konnichiwa" one character at a time. Immediately after the
  very first keystroke, "Converting..." appears (isLoading() flips
  true the instant convertText() is called). It stays visible through
  the rest of the typing and the 300ms debounce window, then flips
  back to false the moment the real response for "konnichiwa" arrives
  and is replaced by:

    Hiragana: こんにちは
    Katakana: コンニチハ

(b) Clearing the input
  With a result already showing, select all the text in the input
  field and delete it. After the 300ms debounce settles on the empty
  string, the real Chapter 5 /api/convert route returns its own real
  400. The output panel shows:

    Type something above to see the conversion.

  -- the same placeholder shown before anything was ever typed, with
  no error text anywhere, confirming the err.status === 400 branch in
  catchError correctly resets hiraganaResult/katakanaResult to '' and
  deliberately leaves errorMessage untouched (still null).

(c) A real, recovered network failure
  With the Express server (nodemon server.js) running, stop it with
  Ctrl+C. Type a new word, e.g. "arigatou". After the debounce window,
  the HttpClient request fails to connect at all (a real connection-
  refused error, not a 400), so catchError's own else branch runs, and
  the output panel shows:

    Couldn't reach the conversion service — try again.

  Restart the server (npx nodemon server.js again) and type another
  character. The request succeeds normally and the correct kana
  replaces the error message -- with no page reload needed, confirming
  the outer subscription really did survive the failed request.

WHY THIS WORKS AS AN ANSWER
----------------------------
All three real behaviors trace back to the same finished
ConvertService: isLoading is set the instant a keystroke arrives and
cleared only once a request settles (success or handled failure);
errorMessage stays null and the two result signals are cleared for
the specific, expected 400 case; and errorMessage is set only for a
genuine, unexpected failure -- one the catchError fix from earlier in
this chapter keeps from ever taking the whole pipeline down with it.
Together they confirm the finished service behaves correctly under
every real condition this app can actually encounter: normal typing,
a cleared field, and a real backend outage.