In this lesson we update the TODO list we have previously done adding the server side communication
1
GET: load data from a REST endpoint
2
constructor vs ngOnInit: the differences when invoking REST API
3
DELETE, PATCH, POST: update data on server
4
PUT vs PATCH
# Initial Example
In the previous chapter we talked about Control Flow syntax and we have created a simple TodoList that handle a local array of ToDos
Now we'll add all the HTTP operations we need to load and update the TODO.
Here you can find the script we have previously written.
Click the Play icon to see it action.
At the end of the chapter the result will be the same but all data will be loaded and saved on server.
src/app.component.ts
# Server
Setting up a real server would have required too much effort so in this lesson we use JSON Server , a fake server that allow us to provide fake API.
Now we'll get our todos from this endpoint:
https://json-server-vercel-for-tutorials.vercel.app/todos
# 1. Add HttpClient feature to project
As we explained in the previous lesson, we need to make
HttpClient available across the whole application:src/main.ts
This operation must be done only once in your application so you don't need it if you have previously created an Angular project and added it to the
bootstrapApplication configuration# 2. Types
The todos endpoint returns an array like what we see below.
So we can create a simple
Todo type that include id, title and the completed properties.
/todos api response
model/todo.ts
# 3. GET and ngOnInit
Angular has a lifecycle for components that consists of several phases.
Each phase has specific hooks that can be implemented to execute code at different stages of the component's lifecycle.
The
constructor is a TypeScript feature used to initialize the class. It is called when the component is instantiated. It is meant for setting up dependency injection and initializing member variables.
Making HTTP calls in the constructor can lead to issues because the component might not be fully initialized yet.ngOnInit is a lifecycle hook provided by Angular and it's called after Angular has fully initialized the component and its data-bound properties.
Making HTTP calls in ngOnInit ensures that the component is ready and fully set up, reducing the risk of errors and improving the readability and maintainability of your code.src/app.component.ts
Now we should:
- inject
HttpClientinAppComponent - load todos from the endpoint
- store data into signal
- display the Todos in the template
The URL is constructed using
BASE_API since we'll reuse the same endpoint in multiple methods:src/app.component.ts
The HTML template does not change since the loaded
Todo data structure is the same of the original exampleWe can then handle errors creating a new
error signal and saving a boolean:true: if there are errorsfalse: if there are no errors
Of course you can save in the signal the Http Status, messages or other errors information but a boolean is enough for now.
src/app.component.ts
When the endpoint returns an error we simply display a message in the template:
src/app.component.ts
Dev Tools Network console
Open browser DevTools to inspect HTTP requests.
In this screen you can see the GET response by using the Network tab of Chrome Dev Tools:
We can also filter the requests using the filter tool. It can be useful when there are too many requests:
# Add Todo (POST)
The
addTodo method is responsible for adding a new todo item to a list. It takes an HTMLInputElement as an argument, which is the input element where the user types the title of the new todo item.The
HttpClient also supports the POST method that also accepts a payload, i.e. an object to send information to the server:src/app.component.ts
The following snippet shows how to make an HTTP POST request to add a new todo item.
The URL is constructed using
BASE_API, and the payload includes the title from the input element and a completed status set to false.The
newTodo response returned by the server now includes the new unique id , so we can safely add it to the todos signal.Before making the HTTP request, the method resets the
error state to false.
This helps clear any previous error state before attempting to update the todo.src/app.component.ts
Dev Tools Network console
Browser DevTools can be used to inspect the payload you sent:
and the response (in this scenario it returns the payload with the new generated
id):
# Remove Todo (DELETE)
The delete operation is very similar to the previous one but simpler.
We just need to invoke the endpoint using the
HttpClient.delete and add the todo id we want to remove in the URL:src/app.component.ts
A REST delete operation often returns an empty object when successful so, when it's completed, we just need to update our signal removing the element from the local state.
src/app.component.ts
# Update Todo (PATCH)
patch method is often used to update an item stored in a database.In Angular you can use the
HttpClient.patch() function:- adding the ID to update in the URL
- passing a payload with the property you want to update. I.e.
{ name: 'John', age: 20 }
src/app.component.ts
In our
toggleTodo method we update the completion status of a specified todo item by making an HTTP PATCH request to the server.It takes a
Todo object (todoToToggle) as an argument, representing the todo item that needs to be toggled.The method makes an HTTP
PATCH request to update the completion status of the todo item:- the URL includes the
idof thetodoToToggle, ensuring that the correct todo item is updated. - in the payload we toggle the
completedstatus so the server receive the new value and it's stored on database.
src/app.component.ts
PUT vs PATCH
The
PATCH method is used to apply partial updates to a resource. It allows updating only specific fields of a resource
The request payload includes only the fields that need to be updatedThe
PUT method is used to update or replace the entire resource with the provided data.
The request payload should include all fields of the resource, even those that are not changing.src/app.component.ts
# Final Example
The full source code is available in the next interactive demo:
And here you can find the full code of
AppComponent:src/app.component.ts
