# Introduction
In this tutorial we will put into practice what we learned in the previous chapters by creating a Todo List.
1
Todo List: Create a dynamic todo list with functionality to add, toggle, and remove items.
2
Reactive Signals: Used Angular signals and computed properties to manage and update the todo list state reactively.
3
Interactive Forms: Implemented an input field for adding new todos and checkboxes for toggling their completion status.
4
Be ready for CRUD apps: learn how to works with collections and be ready for real world CRUD examples
# 1. Display Data
src/app.component.ts
The first script demonstrates the use of a reactive signals and the
JsonPipe to display a list of todo items in JSON format:
JSON pipe
If you remove the JSON pipe the output is
[object Object],[object Object],[object Object]The
JsonPipe is used to transform objects and arrays into a JSON string.
This is a convenient way to display the entire structure of the todos array directly in the template without the need to use console.log and see how data will change when you add, remove or update todos.# 2. Display the TodoList
src/app.component.ts
Now the
@for block is used to iterates over the todos signal, using the id property for tracking each todo item.The
ngClass directive applies the line-through class to the <span> element if the item completed property is true.
# 3. Delete Todo
src/app.component.ts
This updated introduces a remove functionality, allowing users to delete todo items from the list.
Every
<li> element now includes a <button> element with a click event binding that calls the removeTodo method passing the item to remove.This method updates the
todos signal by filtering out the todo item with the matching id. This effectively removes the specified todo item from the array.# 4. Toggle Todo
This updated component introduces a new interactive feature, allowing users to toggle the completion status of todo items via a checkbox.
The
toggleTodo method handles this functionality, ensuring that the todos signal is updated reactively.
The addition of flexbox layout classes further enhances the UI, providing a clean and user-friendly interface.src/app.component.ts
A checkbox is added to each todo item, allowing users to toggle the completion status directly:
The
checked property is bound to the todo.completed property of the todo, providing visual feedback on the current status.The
toggleTodo is invoked each time the checkbox is clickedThe method updates the todos signal by creating a new array where the completed status of the matched todo is toggled.
-
todos.map()is used to iterate over each item in thetodosarray. The goal is to create a new array with the updated completed status for the specified todo. -
t.id === todoToToggle.id ? {...t, completed: !t.completed}: For each todo itemtin the array, the code checks if theidmatches theidoftodoToToggle:- If it matches, it creates a new object with all the properties of
tbut with thecompletedproperty toggled. - If it doesn't match, it returns the original todo item
t.
- If it matches, it creates a new object with all the properties of
-
{...t, completed: !t.completed}: This syntax uses the spread operator to create a new object. It copies all properties fromtand then overrides thecompletedproperty with its toggled value (!t.completed).
# 5. Add Todo
This updated component introduces a new feature allowing users to add todo items via an input field.
The
addTodo method ensures that the new todo is added to the list reactively.The component maintains its previous functionality of toggling and removing todos, providing a comprehensive and interactive todo management interface.
src/app.component.ts
#inputRefis a template reference variable and creates a reference to the input element that can be used within the component's template or passed to the component's methods.
There are better ways to handle forms in Angular but this is the simplest and fastest way if you don't need validations or other types of controls
(keydown.enter)="addTodo(inputRef)"is an event binding that listens for thekeydownevent, specifically when theEnterkey is pressed.
- When the
Enterkey is pressed, theaddTodomethod of the component is called, withinputRef(the reference to the input element) passed as an argument.
- Takes an
HTMLInputElementas a parameter, which is the reference to the input field.
It's very similar to get the input reference using
getElementById or querySelector in vanilla JavaScript.- Creates a new todo object with a unique
id(usingDate.now()), thetitlefrom the input field's value, andcompletedset to false.
In a real world project the ID is usually provided by the server after a POST http operation but using
Date.now() now ensures that we have always a different id for each new item- Updates the todos signal by appending the new todo to the existing array.
- Clears the input field by setting its value to an empty string.
# 6. Computed properties
This updated component introduces a real-time summary of the number of completed and total todos using computed properties.
The new
<div> element at the top of the template dynamically displays these counts, enhancing the user interface and providing an immediate overview of the todo list's status.totalCompletedcomputed property filters the todos array to include only completed tasks and returns their count.totalTodosfilters the todos array to include only incomplete tasks and returns their count.
src/app.component.ts
