Todo List Tutorial
Primary version
Primary version
  • Welcome to the ngGirls tutorial!
  • Workshop: Todo List
    • πŸ‘€About
    • #0: πŸ’ƒ Introduction
    • #1: βŒ› Installations
      • a. StackBlitz instructions
    • #2: πŸ…° Angular kicks in
    • #3: πŸ“ Component
    • #4: ✏ A new component
      • a. StackBlitz instructions
    • #5: πŸ’Ό Class
    • #6: πŸ“₯ Property binding
    • #7: πŸ“€Event binding
    • #8: πŸ“Ž Element ref - #
      • a. About
      • b. Explore
      • c. Resources
    • #9: πŸ“‹ The To Do list
    • #10: βž• New component: todo-item
    • #11: β›“ Interface
      • a. StackBlitz instructions
    • #12: πŸ“ŒAdd items
    • #13: 🚧 Refactor App Component
    • #14: πŸ’… Adding Style
    • #15: πŸ”‹ Creating a Service
    • #16: 🎁 Add Items Using the Service
    • #17: πŸ’ΎLocal storage
    • #18: πŸ—‘ Remove item
    • #19: πŸ”˜ Adding a checkbox
    • #21: πŸ’ͺ Enrich the todo-item component
    • Appendix 1: Git and GitHub
    • Appendix 2: πŸ›° Deploying your app
      • Deploy to Azure Static Web Apps
      • Deploy to GitHub Pages
        • a. StackBlitz instructions
    • Appendix 3: Tutorial Extensions
    • Appendix 4: Generating a new project
    • Troubleshooting
      • Installation
  • More Workshops
    • Second workshops - CRUD and HTTP
      • #1 MongoDB
      • #2 Local server
      • #3 http in diagrams
      • #4 POST
      • #5 GET
      • #6 DELETE and PUT
    • Gallery with Rx.js
      • #0: Init photo gallery
      • #1: Observable
      • #2: More interaction! Upload photos
      • #3: Merging Observables
      • #4: Filtering by category
      • #5: Adding photos to category
    • Forms
      • #1: Template-driven forms
      • #2: Reactive forms
      • #3: Form builder
    • NgRx
      • #1: Actions and reducers
      • #2: Store Devtools
      • #3: Implementing actions in app
      • #4: Selectors
    • RxJS
      • Operators
      • Play time!
    • Blog Editor
      • #1 βš™οΈConfiguring firebase
      • #2 πŸ’…Add Angular Material
      • #3 πŸ’…Add Bootstrap
      • #4 🧭Add Navigation
      • #5 ✏️Add Editor
      • #6 βš™οΈConnect Database
      • #6 πŸ’…Add Feed
      • #7 ✏️Edit Post
      • #9 πŸš€Deploy
      • #10 ✏ ️Next Steps
Powered by GitBook
On this page
  • Adding HttpClientModule
  • Saving data in the database
  • Server url
  • POST body
  • Making the call
  1. More Workshops
  2. Second workshops - CRUD and HTTP

#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.

Previous#3 http in diagramsNext#5 GET

Last updated 5 years ago