Simple Angular To Do App - part 2
Tags: angular, javascript, tutorial, typescript
Published: 2022-02-10 16:24:37

In the [previous post](https://www.vitainbeta.org/simple-angular-to-do-app/), we started building a simple to-do app and we were able to log data from the input element to the console.

If you click on the Add button you should see the value of userInput in the console. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9c1pi4ebdhcoxmviznk.png)

In this post, we will do the following:

- create an array to store a list of elements
- save & display data from the input element
- add functionality to remove items from the list

## Create an array to store a list of elements

We need to add some code to our application to display a list of items.

Let's start from the template file, app.component.html.

Immediately under the form, we add the following code:

```
// app.component.html

...

<ul>
  <li *ngFor="let item of todoList">{{ item }}</li>
</ul>
```

I am assuming you are familiar with [`<ul>` and `<li>` tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul). 

What is more interesting is that [ngFor](https://angular.io/api/common/NgForOf) stuff. If you are not familiar with it, read the *ngFor syntax like this: For each item inside todoList, create a new `<li>` and add that item into the newly created `<li>`.

Where is _todoList_? We don't have it yet. But as the name suggests, todoList will contain a list of items. Later, we will add the data coming from the input element to todoList. Let's define an array that we call _todoList_ into AppComponent.

```
// app.component.ts

...
export class AppComponent {
  title: string = 'Ng To Do';
  subtitle: string = 'Write something to do in the form';
  userInput: string | undefined;
  todoList: string[] = ['Study Angular', 'Add one elememt', 'Correct typo'];

  onSubmit(): void {
    console.log(this.userInput);
  }
}
```

Note that the type of _todoList_ is `string[]` is typescript, and you can read it as an array of strings.

## Save & display data from the input element

We will work with the onSubmit() method to add the user input to _todoList_.

```
// app.component.ts

...
onSubmit(): void {
    console.log(this.userInput);
    this.todoList = this.todoList.concat(this.userInput);
  }

```

You could use `push()` instead of the `concat()` method but I prefer to follow a [functional programming](https://en.wikipedia.org/wiki/Functional_programming) pattern. For the purpose of this exercise, either one is fine.

Now, you can see the items coming fromt the input element in your app! 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48e2h18xlev4yeq3pe52.png)

## Remove items from the list

We will remove items brutally.
First of all, we add an `onDelete()` method to app.component.ts. `onDelete()` takes one parameter of type string.
Then, we use the javascript `filter()` method and the functional programming pattern to create a copy of _todoList_ that contains only the items left after the user decides to delete some items. 

```
// app.component.ts

...
  onDelete(itemToDelete: string): void {
    this.todoList = this.todoList.filter((item) => item !== itemToDelete);
  }
```

Finally, to make magic happen we need to add some code into the template. As we did before, we will use event binding `(click)="onDelete(item)"`.

```
// app.component.html

...

<ul>
  <li *ngFor="let item of todoList" (click)="onDelete(item)" 
   {{ item }}
  </li>
</ul>
```

This is kinda working. 
Now you can remove items by clicking on them. In other words, by clicking on the text you trigger the `onDelete()` method that executes the javascript code to filter out the item you want to delete.

You can find the code [here](https://github.com/lorenzojkrl/coding-events/tree/main/angular/simple-to-do/part-2).

## Conclusion & New Beginning
The app is working, but it is definitely a raw piece of code. Accessibility is bad, items with the same text get deleted together, style... well, you see that.

However, since there are many ways to proceed, I need some push :smile:

So, here are some options, what do you prefer?

1. Add some CSS to this crappy style
2. Improve accessibility
3. Improve functionality: one click, one delete
4. Add validations to the input 
5. Rewrite this app to use proper Angular Forms
 
Write your preference in the comments. You can also propose something different!