ToDo Service

Go to the app directory and create a folder named services. Create a file named todo.service.ts under the folder.

cd src/app mkdir services cd services code todo.service.ts

todo.service.ts

We’ve imported the Todo class at first. And then we have declared api_url and todoUrl properties.

In the constructor we have injected HttpClient object to the ToDoService. Let’s import HttpClient Module to the app.module.ts files imports array.

And we also need to add ToDoService in the providers array of the Module.

Now first lets Populate the todo.service.ts file.

Now we’ll dive into the app.component.ts file. Before that we need to update the todo.model.ts file to contain a default constructor — that will initialize all the values of the ToDo object.

App.component.ts

Now go to the app.component.html and write the following -

Now the http://localhost:4200 will show the list of the ToDos from the API. Let’s create the click event handler that we’ve made in this HTML template.

After creating a new Todo we are adding that todo to the list and then resetting the newtodo Value.