Here you can write the post for social. It's not printed in the article ## KeyPoints GET: load data from a REST endpoint' }, { l: 'constructor vs ngOnInit: the differences when invoking REST API' }, { l: 'DELETE, PATCH, POST: update data on server' }, { l: 'PUT vs PATCH' }, ]}> In this lesson we update the TODO list we have previously done adding the server side communication # Initial Example ![Computed todolist|left|65|525|175|false|true](/courses/angular/basics/60-http-client/10-create-a-todo-list/step6-computed.png)

In the [previous chapter](/courses/angular/basics/50-dynamic-templates-with-control-flow-blocks/40-create-a-todo-list) 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. ```ts src/app.component.ts|["angular"]||false|true|angular17-daisy import { Component, computed, signal } from '@angular/core'; import { NgClass, JsonPipe } from '@angular/common'; @Component({ selector: 'app-root', standalone: true, imports: [NgClass, JsonPipe], template: `

{{totalCompleted()}} completed | {{ totalTodos() }} todos

{{todo.title}}

{{todos() | json}}

`, }) export class AppComponent { todos = signal([ { id: 1, title: 'Todo 1', completed: true }, { id: 2, title: 'Todo 2', completed: false }, { id: 3, title: 'Todo 3', completed: true }, ]) totalCompleted = computed(() => this.todos().filter(t => t.completed).length) totalTodos = computed(() => this.todos().filter(t => !t.completed).length) addTodo(input: HTMLInputElement) { const newTodo: Todo = { id: Date.now(), title: input.value, completed: false } this.todos.update(todos => [...todos, newTodo]) input.value = ''; } removeTodo(todoToRemove: Todo) { this.todos.update(todos => todos.filter(todo => todo.id !== todoToRemove.id)) } toggleTodo(todoToToggle: Todo) { this.todos.update(todos => { return todos.map(t => t.id === todoToToggle.id ? {...t, completed: !t.completed} : t); }) } } interface Todo { id: number; title: string; completed: boolean; } ``` # Server Setting up a real server would have required too much effort so in this lesson we use [JSON Server](https://github.com/typicode/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](https://json-server-vercel-for-tutorials.vercel.app/todos) But this is a **fake server**. What does it mean? 1. we can load data by using a GET operation 2. The data will not be physically update in the database but we'll always receive a `200` status when we try to use DELETE, PATCH or POST methods even if data are not modified. > It is necessary otherwise anyone could delete the data and other readers would not be able to complete the tutorial. # 1. Add HttpClient feature to project As we explained in the previous lesson, we need to make `HttpClient` available across the whole application: ```ts src/main.ts|["angular"]||false|true export const appConfig: ApplicationConfig = { providers: [ provideHttpClient() ] }; bootstrapApplication(AppComponent, appConfig); ``` > 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](https://json-server-vercel-for-tutorials.vercel.app/todos) returns an array like what we see below. So we can create a simple `Todo` type that include `id`, `title` and the `completed` properties.

```json /todos api response|["json"]||false|true [ { "id": 1, "title": "ToDo 1", "completed": true }, { "id": 2, "title": "ToDo 2", "completed": true }, { "id": 3, "title": "ToDo 3", "completed": false } ] ```

```ts model/todo.ts|["ts"]||false|true interface Todo { id: number; title: string; completed: boolean; } ```

# 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. ```ts src/app.component.ts|["angular"]||false|true import { OnInit, ... } from '@angular/core'; // ... export class AppComponent implements OnInit { ngOnInit(): void { // make HTTP calls when component is mount } // ... ``` Now we should: * inject `HttpClient` in `AppComponent` * 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: ```ts src/app.component.ts|["angular"]||false|true const BASE_API = 'https://json-server-vercel-for-tutorials.vercel.app'; // ... export class AppComponent implements OnInit { // inject Http Client http = inject(HttpClient) // signals used to store todos todos = signal([]); // Invoked when component is "ready" ngOnInit(): void { // load todos from the endpoint this.http.get(`${BASE_API}/todos`) .subscribe({ next: res => { // save the result into signal this.todos.set(res) } }) } // ... ``` > The HTML template does not change since the loaded `Todo` data structure is the same of the original example ## Handle Errors We can then handle errors creating a new `error` signal and saving a boolean: * `true`: if there are errors * `false`: 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. ```ts src/app.component.ts|["angular"]|{4,12-14}|false|true export class AppComponent implements OnInit { http = inject(HttpClient) todos = signal([]); error = signal(false) ngOnInit(): void { this.http.get(`${BASE_API}/todos`) .subscribe({ next: res => { this.todos.set(res) }, error: () => { this.error.set(true) } }) } // ... ``` When the endpoint returns an error we simply display a message in the template: ```ts src/app.component.ts|["angular"]||false|true @if (error()) {

error!

} ``` 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: ![Computed todolist|left|65|100%|175|false|true](/courses/angular/basics/60-http-client/10-create-a-todo-list/devtools-get.png) --- We can also filter the requests using the filter tool. It can be useful when there are too many requests: ![Computed todolist|left|65|464|252|false|true](/courses/angular/basics/60-http-client/10-create-a-todo-list/devtool-filters.png) # 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: ```ts src/app.component.ts|["angular"]||notShowLineNumbers|true this.http.post(`/api`, { ... }) ``` --- 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. ```ts src/app.component.ts|["angular"]||notShowLineNumbers|true addTodo(input: HTMLInputElement) { this.error.set(false) this.http.post(`${BASE_API}/todos`, { title: input.value, completed: false }) .subscribe({ next: newTodo => { this.todos.update(todos => [...todos, newTodo]) input.value = '' }, error: () => { this.error.set(true) } }) } ``` Browser DevTools can be used to inspect the payload you sent: ![Computed todolist|left|65|100%|200|false|true](/courses/angular/basics/60-http-client/10-create-a-todo-list/devtool-post-payload.png) --- and the response (in this scenario it returns the payload with the new generated `id`): ![Computed todolist|left|65|100%|200|false|true](/courses/angular/basics/60-http-client/10-create-a-todo-list/devtools-post-response.png) # 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: ```ts src/app.component.ts|["angular"]||notShowLineNumbers|true this.http.delete(`/api/[ID_TO_REMOVE]`) ``` > 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. ```ts src/app.component.ts|["angular"]||notShowLineNumbers|true removeTodo(todoToRemove: Todo) { this.error.set(false) this.http.delete(`${BASE_API}/todos/${todoToRemove.id}`) .subscribe({ next: () => { this.todos.update(todos => todos.filter(todo => todo.id !== todoToRemove.id)) }, error: () => { this.error.set(true) } }) } ``` # 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 }` ```ts src/app.component.ts|["angular"]||notShowLineNumbers|true this.http.patch(`/api/[ID_TO_UPDATE]`, { propToUpdate: newValue }) ``` --- 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 `id` of the `todoToToggle`, ensuring that the correct todo item is updated. * in the payload we toggle the `completed` status so the server receive the new value and it's stored on database. ```ts src/app.component.ts|["angular"]||notShowLineNumbers|true toggleTodo(todoToToggle: Todo) { this.error.set(false) this.http.patch(`${BASE_API}/todos/${todoToToggle.id}`, { completed: !todoToToggle.completed }) .subscribe({ next: res => { this.todos.update(todos => { return todos.map(t => t.id === todoToToggle.id ? res : t); }) }, error: () => { this.error.set(true) } }) } ``` 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 updated** The `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. ```ts src/app.component.ts|["angular"]||showLineNumbers|true toggleTodo(todoToToggle: Todo) { this.http.put(`${BASE_API}/todos/${todoToToggle.id}`, { ...todoToToggle, // Spread the properties of the todoToToggle object completed: !todoToToggle.completed }) // ... ``` # Final Example ![Computed todolist|left|65|714|314|false|true](/courses/angular/basics/60-http-client/10-create-a-todo-list/todolist-demo.gif) The full source code is available in the next interactive demo: And here you can find the full code of `AppComponent`: ```ts src/app.component.ts|["angular"]||notShowLineNumbers|true import { Component, computed, signal, inject, OnInit } from '@angular/core'; import { NgClass, JsonPipe } from '@angular/common'; import { HttpClient } from '@angular/common/http'; import { Todo } from './model/todo'; const BASE_API = 'https://json-server-vercel-for-tutorials.vercel.app'; @Component({ selector: 'app-root', standalone: true, imports: [NgClass, JsonPipe], template: ` @if (error()) {

error!

}

{{totalCompleted()}} completed | {{ totalTodos() }} todos

{{todo.title}}

{{todos() | json}}

`, }) export class AppComponent implements OnInit { http = inject(HttpClient); todos = signal([]); error = signal(false); totalCompleted = computed( () => this.todos().filter((t) => t.completed).length ); totalTodos = computed(() => this.todos().filter((t) => !t.completed).length); ngOnInit() { this.http.get(`${BASE_API}/todos`).subscribe({ next: (res) => { this.todos.set(res); }, error: (err) => { console.log('here', err); this.error.set(true); }, }); } addTodo(input: HTMLInputElement) { this.error.set(false); this.http .post(`${BASE_API}/todos`, { title: input.value, completed: false, }) .subscribe({ next: (newTodo) => { this.todos.update((todos) => [...todos, newTodo]); input.value = ''; }, error: () => { this.error.set(true); }, }); } removeTodo(todoToRemove: Todo) { this.error.set(false); this.http.delete(`${BASE_API}/todos/${todoToRemove.id}`).subscribe({ next: () => { this.todos.update((todos) => todos.filter((todo) => todo.id !== todoToRemove.id) ); }, error: () => { this.error.set(true); }, }); } toggleTodo(todoToToggle: Todo) { this.error.set(false); this.http .patch(`${BASE_API}/todos/${todoToToggle.id}`, { completed: !todoToToggle.completed, }) .subscribe({ next: (res) => { this.todos.update((todos) => { return todos.map((t) => (t.id === todoToToggle.id ? res : t)); }); }, error: () => { this.error.set(true); }, }); } } ``` Following script does not work because my server has some problems inside stackblitz ```ts src/app.component.ts|["ts"]||false|true| import { Component, computed, signal, inject, OnInit } from '@angular/core'; import { NgClass, JsonPipe } from '@angular/common'; import { HttpClient } from '@angular/common/http'; import { Todo } from './model/todo'; const BASE_API = 'https://json-server-vercel-for-tutorials.vercel.app'; @Component({ selector: 'app-root', standalone: true, imports: [NgClass, JsonPipe], template: ` @if (error()) {

error!

}

{{totalCompleted()}} completed | {{ totalTodos() }} todos

{{todo.title}}

{{todos() | json}}

`, }) export class AppComponent implements OnInit { http = inject(HttpClient); todos = signal([]); error = signal(false); totalCompleted = computed( () => this.todos().filter((t) => t.completed).length ); totalTodos = computed(() => this.todos().filter((t) => !t.completed).length); ngOnInit() { this.http.get(`${BASE_API}/todos`).subscribe({ next: (res) => { this.todos.set(res); }, error: (err) => { console.log('here', err); this.error.set(true); }, }); } addTodo(input: HTMLInputElement) { this.error.set(false); this.http .post(`${BASE_API}/todos`, { title: input.value, completed: false, }) .subscribe({ next: (newTodo) => { this.todos.update((todos) => [...todos, newTodo]); input.value = ''; }, error: () => { this.error.set(true); }, }); } removeTodo(todoToRemove: Todo) { this.error.set(false); this.http.delete(`${BASE_API}/todos/${todoToRemove.id}`).subscribe({ next: () => { this.todos.update((todos) => todos.filter((todo) => todo.id !== todoToRemove.id) ); }, error: () => { this.error.set(true); }, }); } toggleTodo(todoToToggle: Todo) { this.error.set(false); this.http .patch(`${BASE_API}/todos/${todoToToggle.id}`, { completed: !todoToToggle.completed, }) .subscribe({ next: (res) => { this.todos.update((todos) => { return todos.map((t) => (t.id === todoToToggle.id ? res : t)); }); }, error: () => { this.error.set(true); }, }); } } ``` ```ts src/model/todo.ts|["ts"]||false|true| export interface Todo { id: number; title: string; completed: boolean; } ``` ```ts src/main.ts|["ts"]||false|true| import { bootstrapApplication } from '@angular/platform-browser'; import { provideHttpClient } from '@angular/common/http'; import { ApplicationConfig } from '@angular/core'; import {AppComponent} from './app.component'; import 'zone.js'; export const appConfig: ApplicationConfig = { providers: [ provideHttpClient() ] }; bootstrapApplication(AppComponent, appConfig); console.clear() ```

Angular Cookbook: The Basics

Send your feedback

Angular Cookbook: The Basics

Send your feedback