Update Feature - 1

 In Previous topic we have looked in Delete Functionality and integrated both UI and JAVA and on click of Delete button we showing message in header if it is success.

In this topic we will work on update functionality, let's start and update our code as below :

First we have to update our todos-list.component.html and add a column for update, we will remove action column and change it to update and delete columns.

Your page will look as below:

Now we have to create a updateTodo method in todos-list.component.ts file and from this method we want to open a new page where we update the details.

so for opening a new page we have create a component so create a component with ng generate component todo as shown below

 If you remember from some of the starting topic we have added new component to app-routing.module.ts file. we have to do this because we are routing to another page when we click on update button.

Now create updateTodo method which will route to the edit page so for routing we have to use router change the code as below in todos-list.component.ts file.

What we have to do next is to create our page when we route to edit todo for that below is the html code for this.

Now go to your page and click on update your page will look similar to this

Here you can see you are routed to edit page the data is not populated, this is because we are not calling any API, let's create a API which will return data for a specific todo id. go to you java project and add below code 

similarly update your interface and as you see we are reusing the method findTodoById() from service class you have to add @Override annotation.

Now we to to call this API for data retrieval for that update todo-data.service.ts as below:

Now when our todo.component.ts gets initialized at that time we have call our API for that we have to update our code as below:

Till Here you are able to hit the java API and get the response in TodoList form.

Now we have to map this to our html rows for that we have to update todo.component.html file as below

Now after all the change check you UI and click on update you can see data as below

Now we have to work on cancel and Update button ,

 when we click on cancel button it will route to todo List page for that we can use router as below 

Now if you click on cancel button you will be routed to todoList page.

In Next Topic we will continue on update feature.

Previous Topic