A store driven by a Subject in Angular

Angular interview exercise on RxJS interop, difficulty 3 of 3. Solve it in the editor beside a worked example, or cold in Interview mode with the example hidden; the tests run the moment you do.

TodoStore: a Subject of actions (add with a title, toggle with an id, remove with an id) reduced with scan into `todos …" /> …" /> …" /> …" /> …" /> …" /> …" /> (ids counted up from 1, new todos not done), seeded with [] and shared. TodoComponent shows the store's todos as <li> with the class "done" when done, an <input> adding on Enter, and per item a <button class="toggle"> and <button class="remove">.

Each exercise pairs a worked example with a twin problem to solve in a real editor; the tests run the moment you do. Interview mode hides the example: solve it from memory, without the hint or the solution, and it counts as solved cold. Progress is saved in your browser, and in your account if you sign in.

More RxJS interop in Angular

• An observable as a signal
• The async pipe
• Debounced search with switchMap
• Subscriptions that end with the component

All Angular exercises · Other languages and frameworks