#4 POST

Let's add in the code need to convert from using local storage to the server. Angular has all the pieces you need to make HTTP calls. Since we followed good coding practices by creating TodoListService, a service solely responsible for todo list item management, the only place where we have to make any code changes is inside that service.

Adding HttpClientModule

For performing HTTP calls in Angular we need to use HttpClientModule which offers a simplified HTTP client library. This module contains libraries we need to make the HTTP calls we'll use to interact with the server.

We need to import this module in our app.module.ts so that it's available for use within the application.

...
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    InputButtonUnitComponent,
    TodoItemComponent,
    ListManagerComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Now we can inject the HttpClient library in todo-list.service.ts. We'll ask for an instance of the HttpClient service in the constructor, and make sure to import the class.

  constructor(private storageService: StorageService,
              private http: HttpClient) {
  }

Saving data in the database

When saving new todo items in the app, we need to create that data in the server and in the database, so we will use the POST REST method.

In your addItem method we want to add the code to POST an item by using HttpClient's built in post method.

this.http.post();

The post method requires 2 parameters, the url and the body. Let's start with the url.

Server url

The url is the address of the server so the HttpClient knows where to POST the data. The url includes a host and a path. Since we are running the server locally, the server's host address is "localhost:3000".

The path for a url usually includes a string for the specific type of data we are interacting with. We named the path "items" and we configured this as part of the provided server setup.

The full url to the server is the combination of the host and the path, which for our case, is http://localhost:3000/items.

POST body

Now we need to add the data, or the body, to the request. We want to pass in the todo item.

this.http.post('http://localhost:3000/items', item);

Making the call

The HttpClient library requires us to subscribe to the output of the post() call to trigger calling the server. We can do so by adding .subscribe() at the end of call.

  addItem(item: TodoItem) {
    this.http.post('http://localhost:3000/items', item)
    .subscribe();
  }

We now have a working call to the local server! Try adding a todo item in your app. You can see log output in your local server console and feel free to check the content of your list items in MongoDB Atlas.