In the first part of this Angular tutorial series, you saw how to get started with creating a Grocery List Manager using Angular. You learnt how to create the view for the Grocery component, adding items to the grocery list and displaying the added items.
In this part, you’ll implement the features to mark completed items, edit existing items, and remove added items.
Getting Started
Let’s get started by cloning the source code from the first part of the tutorial. From your terminal, write in the following code to clone the source code:
git clone https://github.com/royagasthyan/AngularGrocery
Once the source code has been cloned, navigate to the project folder and install the required dependencies.
cd AngularGrocery npm install
After installing the dependencies, you will be able to start the server. From the project folder, type in the following commands:
ng serve
Point your browser to http://localhost:4200/ and you should have the application running.
Updating Grocery Items
Once you have the grocery items added to the list, you should be able to edit and update the items. Let’s provide an edit button in the listing grid which, when clicked, will enable the editing of existing items.
Modify the app.grocery.html code to include the edit button inside the grid.
Save the above changes and restart the server. Load the page and enter a few items and you will have the edit button for each item.
When the user clicks the edit button, you need to add an on click method to handle the item edit. Modify the app.grocery.html to add an on click event for editing the item.
Pass the task to the onEdit method as shown in the above code to identify the item to be edited.
Inside the GroceryComponent class initialize the task scope variable as shown:
task = {
name: '',
id: 0
};
In the onClick method, you’ll check for the id to see if it’s an existing item or a new item. Modify the onClick method as shown:
if(this.task.id == 0){
this.tasks.push({id: (new Date()).getTime(),name: this.task.name});
}
As seen, you have assigned a unique time stamp as id to each task. Now let’s define the onEdit method to edit the existing item. Inside the onEdit method, assign the passed in item to the task variable.
onEdit(item){
this.task = item;
}
Save the changes and restart the server. Enter a new item in the grocery list and click on the corresponding edit button. You will be able to edit and update the entry by clicking the OK button.
Deleting Grocery Items
Let’s add a delete icon to remove the existing items. Update the app.grocery.html file to modify the HTML code as shown:
Here is how the complete app.grocery.html file looks:
Grocery list manager
- {{ task.name }}
Add an on click event to the remove icon to delete the grocery item.
Save the changes and restart the server. Try adding new items to the grocery manager app and you will have the items listed along with the delete and edit icons.
To implement the delete functionality, you need to add the onDelete method in the app.grocery.ts file as shown:
onDelete(item){
// Delete functionality will be here
}
Once the user clicks the delete icon, you need to check the item id against the grocery item list and remove the entry from the tasks list. Here is how the onDelete method looks:
onDelete(item){
for(var i = 0;i < this.tasks.length; i++){
if(item.id == this.tasks[i].id){
this.tasks.splice(i,1);
break;
}
}
}
As seen in the above code, you have iterated the tasks list and checked it against the clicked item id. If it matched the item in the tasks list, it is removed using the splice method.
Save the above changes and restart the server. Add a few items to the grocery list manager. It will be added with the delete and edit icons to the task list grid. Try clicking on the remove icon and the item will be deleted from the items list.
Marking the Grocery Item as Done
Let's add the functionality to strike out the items added to the list. Once the user is done with the tasks in the grocery list manager, it should be possible to strike out the completed tasks. To track the new and completed tasks, add a new variable strike to the task information.
Modify the onClick method to include the new strike variable as shown:
onClick(){
if(this.task.id == 0){
this.tasks.push({id: (new Date()).getTime(),name: this.task.name, strike: false});
}
this.task = {
name: '',
id: 0
};
}
Add a new class called strike in the src/style.css file which would strike out the item.
.strike{
text-decoration:line-through;
}
Include an on click event on the item to toggle the strike variable in the items variable. You'll be applying the strike class to the items based on the boolean value of the strike variable. By default, it will be false. Here is the onStrike method to toggle the strike variables value:
onStrike(item){
for(var i = 0;i < this.tasks.length; i++){
if(item.id == this.tasks[i].id){
if(this.tasks[i].strike){
this.tasks[i].strike = false;
}
else{
this.tasks[i].strike = true;
}
break;
}
}
}
As seen in the above method, you iterate through the list of items. Once the item is found, you toggle the strike value.
Based on the strike variable, you need to apply the class strike to the task name span. Here is how it looks:
{{ task.name }}
As seen, you have used the ngClass directive to apply the class strike to the span element if the task.strike value is true.
Save the above changes and restart the server. Add the items to the list and click on the added item. Once clicked, the item will be struck out as expected.
Wrapping It Up
In this tutorial, you saw how to update, delete and mark the task as complete in the grocery manager app using Angular. I hope you enjoyed the tutorial. Do let me know your thoughts in the comments below.
JavaScript has become one of the de facto languages of working on the web. It’s not without its learning curves, and there are plenty of frameworks and libraries to keep you busy, as well. If you’re looking for additional resources to study or to use in your work, check out what we have available in the Envato marketplace.
Oh, and don't forget that the source code from this tutorial is available on GitHub.
