Now that you have the to-do component generated, you have four new files within the todo folder. You'll edit three of them to look like the following code listings that follow. You also need to edit three of the files that were already in your project, (where we'll open the curtains to meet the wizard), we can also integrate components from other libraries and frameworks into our application. We'll take a look at how to do this with NG Bootstrap in Chapter 6, Building Angular Components, and with Angular Material in Chapter 7, Templates, Directives, and Pipes. There's no shortage of components for Angular, and the amount available for your use will only grow over time.

Whenever I learn new technology and follow along with a book, blog post, or whatever else, I enter everything in by hand—even when the files are available for download. Yes, manual entry can be a tedious process, but it engages your brain, and the material and concepts start to get absorbed. Simply downloading the files and cutting and pasting the contents into your application does not have the same effect. I'll let you decide which way you want to go. If you opt for downloading the code, there are instructions at the beginning of this book for doing so:

• The code listing for todo.component.html (within the src | app | todo folder) is shown here:

<div class="container dark">
    <div class="column">
    <p>Add a todo item</p>
    </div>
    <div class="column">
    <p>Todo list ({{ itemCount }} items)</p>
    </div>
    </div>
    <div class="container light">
    <div class="column">
    <p class="form-caption">Enter an item to add to your todo list</p>
    <form>
    <input type="text" class="regular" name="item" placeholder="Todo item ..." 
      [(ngModel)]="todoItemText">
    <input type="submit" class="submit" value="Add todo" (click)="addTodoItem()">
    </form>
    </div>
    <div class="column">
    <p class="todolist-container" *ngFor="let todoItem of todoItems">
    {{ todoItem }}
    </p>
    </div>
    </div>

• The code listing for todo.component.ts (within the src | app | todo folder) is as follows:

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-todo',
    templateUrl: './todo.component.html',
    styleUrls: ['./todo.component.scss']
})
export class TodoComponent implements OnInit {
itemCount: number;
todoItemText: string;
todoItems = [];
ngOnInit() {
this.itemCount = this.todoItems.length;
}
addTodoItem() {
this.todoItems.push(this.todoItemText);
this.todoItemText = '';
this.itemCount = this.todoItems.length;
}
}

• The code listing for todo.component.scss (within the src | app | todo folder) is as follows:

.container {
    display: grid;
    grid-template-columns: 50% auto;
    }
    .column {
    padding: .4em 1.3em;
    }
    .dark {
    background: #2F4F4F;
    }
    .light {
    background: #8FBC8F;
    }
    input.regular {
    border: 0;
    padding: 1em;
    width: 80%;
    margin-bottom: 2em;
    }
    input.submit {
    border: 0;
    display: block;
    padding: 1em 3em;
    background: #eee;
    color: #333;
    margin-bottom: 1em;
    cursor: pointer;
    }
    .todolist-container {
    background: rgb(52, 138, 71);
    padding: .6em;
    font-weight: bold;
    cursor: pointer;
    }
    .form-caption {
    }

• The following is the code listing for app.component.html (within the src | app folder). Chapter 1, Quick Start : to-do List (quick example app):

<br> <br>
<app-todo></app-todo>
<router-outlet></router-outlet>

• The code listing for app.module.ts (within the src | app folder) is as follows:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TodoComponent } from './todo/todo.component';
@NgModule({
declarations: [
AppComponent,
TodoComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

• The code listing for styles.scss (within the src folder) is shown here:

/* You can add global styles to this file, and also import other style files */
body {
font-family: Arial, Helvetica, sans-serif;
color: #eee;
background: #869bbd;
padding: 4em;
}
a {
color: #fff;
text-decoration: none;
}
ul {
list-style-type: none;
margin: 0 0 2em 0;
padding: 0;
}
ul li {
display: inline;
margin-right: 25px;
}
ul li a {
font-size: 1.5em;
}

Cool! So, now you have all the code in place. Do you remember how to run your Angular application? Enter $ ng serve at your command prompt, and once the message comes up that the compilation was successful, open your browser and go to http://localhost:4200. Does the application work? If so, congratulations on building your first Angular application! If not, check for typos.

Play around with your new application. We haven't bothered to take the time to add functionality to edit the to-do item, or to delete them, but you can clear it out by just reloading the application by hitting your browser's refresh button.

Why do things get cleared out upon refreshing the page? This happens because we have an SPA and are not persisting the data that we enter into a database. We'll definitely be sure to add the ability to persist our data when we build our much larger application, which will be introduced to you by the end of this chapter.