Building a ToDo App with Angular

First up, most of the code comes from the great learning resource FreeCodeCamp. The article is a quick read and you can get up and running in 20 minutes. I’m a big believer that the best way to learn is to teach, so I’m doing some re-writing of the article. There’s a few things that I would change and a few things that had to change because Angular 6 came out.

Overview

I’ve had a couple of projects that have required Angular and since I’ve started using it, it’s been a love/hate relationship. The learning curve to Angular feels a bit steeper than some other web technologies, but once you get rolling, it’s a powerful tool for your web apps. I started with a ToDo app because that seems to be the new hello world demo and a good representation of a basic app.

Node & NPM

You’ll need to have Node.js and npm installed on your computer. You can check your node version by typing node -v. Currently, I’m running v9.3.0. You can also check your npm version by typing npm -v. Currently, I’m running 6.1.0. This commands are run inside of your terminal.

Angular CLI

This app requires the latest version of Angular-CLI (a.k.a command line interface). You can install this by running npm install -g @angular/cli. Currently, I’m running v6.0.8 of angular/cli.

 

Getting Started

Click here for a larger version.

To get started, we’ll create a new app using Angular-cli. In your terminal, navigate to a folder and type ng new mytodoapp. The app name, mytodoapp, can be replaced with any name that you want. Make sure to replace spaces with dashes. I’m keeping my Angular apps in a folder called Angular (pretty genius, right?).

Once your app is created, open up the project in your favorite code editor. I currently use Atom and in Atom, use File -> Open Project Folder. You’ll see a ton of files, but our work will be down in /src/styles.css and /src/app/.

Running the App

With the terminal open, run a cd (change directory) command to move into the mytodoapp folder. Once you’re in there, run ng serve –open to run the app in your local browser. If you run into problems with port 4200 already being open, you can enter ng serve –open –port 4201 to change the port location.

Once you run this command, your browser should open up the app at localhost:4201 or at the port you specified. And now, you have your very first Angular app running!

Adding Some Style

Next, we’ll add some style to our todo app using Bootstrap. The easiest way to integrate Bootstrap is using their CDN link. Insert this link into your /src/index.html file. As you make changes to your web app, you’ll notice the browser reloads. One really cool thing is the browser will reload on every change you make. This makes prototyping a much faster process.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" 
rel="stylesheet" 
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" 
crossorigin="anonymous">

Then, clear out the file in /src/app/app.component.html and add in the following code.

<div class="container">
 <form>
  <div class="form-group">
  <h1 class="text-center text-primary">Todo App</h1>
   <div class="input-group-prepend">
       <input type="text" class="form-control" placeholder="Add a todo item and click the plus sign." name="todo">
    <span class="input-group-text">Add</span>
   </div>
  </div>
 </form>
</div>

I varied my approach a bit and entered the following styles in /src/styles.css. This is open to debate, but I put the following body styles in /src/styles.css.

body {
 padding: 0;
 margin: 0;
 background: #4c5c68;
}

Then, within /src/app/app.component.css, place the following:

form{
 max-width: 90em;
 margin: 1em auto;
}

Adding Functionality

The next few parts are going to vary quite a bit from the Free Code Camp website, but in a good way. The following code will make sure your todo app is compatible with Angular 6. The first thing we’ll do is adjust the <input> element. We’ll add create a variable using the # symbol, add the (keyup), and ngModel attributes.

<input type="text" class="form-control" 
placeholder="Add a todo item and click the plus sign." 
name="todo" #todo (keyup)="0" ngModel>

Directly underneath the <input> element, we can put <p>{{todo.value}}</p> to output the value of the todo variable.

<p>{{todo.value}}</p>

Your code in app.component.html should look like the following.

Then, we need create an array that will store the values of our input. In /src/app/app.component.ts, remove the title variable and enter todoArray.

export class AppComponent {
 todoArray = []

}

And, we need to add a click event that will place the value from the <input> element into the newly added todoArray. In app.component.html, add the following snippet. This tells our app that when the add icon is clicked, call the addTodo() function and pass in the parameter todo.value.

<span class="input-group-text" (click)="addTodo(todo.value)">
 <i class="material-icons">add</i>
</span>

Since we are calling an addTodo function, we’ll need to add the function to /src/app/app.component.ts. Add the following after the todoArray.

export class AppComponent {
 todoArray = []

 addTodo(value) {
  this.todoArray.push(value)
  console.log(value)
 }
}

To wrap up the functionality, we’ll need to add a list to /src/app/app.component.html to display the data our user is entering. This ought to do it.

<div class="data">
 <ul class="list-unstyled">
  <li *ngFor="let todo of todoArray; index as i;">
   {{todo}}
  </li>
 </ul>
</div>

It doesn’t look pretty (yet) but it’s displaying the data that our user is entering!

Adding More Styles and Icons

Let’s make our form a little prettier by adding the following styles to /src/app/app.component.css. This is straight css.

/*Google fonts*/
@import url('https://fonts.googleapis.com/css?family=Roboto');
form{
 max-width: 90em;
 margin: 4em auto;
 position: relative;
 background: #dcdcdd;
 padding: 2em 3em;
 border-radius: 5px;
}
form h1{
 font-family: "Roboto";
 color:#4c5c68;
}
form input[type=text]::placeholder{
 font-family: "Roboto";
 color:#4545;
}
form .data{
 margin-top: 1em;
}
form .data li{
 background: #fff;
 border-left: 4px solid #F97300;
 padding: 1em;
 margin: 1em auto;
 color: #212529;
 font-family: "Roboto";
}
form .data li i{
 float: right;
 color: #888;
 cursor: pointer;
}
form .input-group-text{
 background: #F97300;
 border-radius: 50%;
 width: 5em;
 height: 5em;
 padding: 1em 23px;
 color: #fff;
 position: absolute;
 right: 13px;
 top: 72px;
 cursor: pointer;
}
form .input-group-text i{
 font-size: 2em;
}
form .form-control{
 height: 3em;
 font-family: "Roboto";
}
form .form-control:focus{
 box-shadow: 0;
}

We’ll also add a link to the material icons in our /src/index.html file. I’ve been placing the material icon classes into the html and this stylesheet will enable them.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Deleting Items

As the final piece of functionality, we’ll want to give the user an option to delete an item. In /src/app/app.component.html, add in the following after {{todo}}.

<i class="material-icons" (click)="deleteItem(i)">delete</i>

And in /src/app/app.component.ts, we’ll add in a deleteItem() function.

deleteItem(index) {
 this.todoArray.splice(index,1) 
}

Now, the user can click the delete icon to remove an item from their to-do list!

Conclusion

And that’s it to building a todo app with Angular! This little app has plenty of room to grow. You can create an auto-numbering system or make the app mobile responsive (the add icon doesn’t always stick to where it’s supposed to be). The sky’s the limit! If you have questions, please leave them below.

Leave a Reply

Your email address will not be published. Required fields are marked *