Communicating and having a global/local state in sync with your backend is the heart of any application. You will need to master those following best practises to build strong and reliable Angular Application.

Statement

In this exercice, you have a small CRUD application, which get a list of TODOS, update and delete some todo.

Currently we have a working exemple but filled with lots of bad practices.

Step 1: refactor with best practices

What you will need to do:

Avoid any as a type. Using Interface to leverage Typescript type system prevent errors
Use a separate service for all your http calls and use a BehaviourSubject for your todoList
Use AsyncPipe to suscribe to your todo list. (Let you handle subscription, unsuscription and refresh of the page when data has changed), avoir manual subscribe when it's not needed
Don't mutate data

// Avoid this
this.todos[todoUpdated.id - 1] = todoUpdated;

// Prefer something like this, but need to be improved because we still want the same order
this.todos = [
  ...this.todos.filter((t) => t.id !== todoUpdated.id),
  todoUpdated,
];

Use ChangeDectection.OnPush

Step 2: Improve

Add a Delete button: Doc of fake API
Handle errors correctly. (Globaly)
Add a Global loading indicator. You can use MatProgressSpinnerModule

Step 3: Maintainability!! add some test

Add 2/3 tests

Step 4: Awesomeness!!! master your state.

Use the component store of ngrx as a local state of your component. (or any other 3rd Party lib)
Have a localize Loading/Error indicator, e.g. only on the Todo being processed and disable all buttons of the processed Todo. (Hint: you will need to create an ItemComponent)

Submitting your work

Fork the project
clone it
npm install
nx serve crud
...work On it
Commit your work
Submit a PR with a title beginning with Answer:3 that I will review and other dev can review.

You can ask any question on