Angular 2 - Simple Todo List Example Code

The Demo The Code

Angular CLI, a Command Line Tool for Angular, has been used to create a quick development setup and a minimized distribution bundle for production. See also How to bundle Angular 2 apps for production.

index.html


<!doctype html>
<html>
<head>

  <title>Simple Angular 2 Todo List Example
  <link href="css/todos.css" rel="stylesheet" type="text/css"/>

</head>
<body>

  <h1>Angular 2 - Simple Todo List Example

  <todos class="todos">

  <script type="text/javascript" src="inline.js">
  <script type="text/javascript" src="styles.9e573d8655bb73d5f00d.bundle.js">
  <script type="text/javascript" src="main.6015e632181c7e5c6041.bundle.js">

  </body>
  </html>

app.module.ts

    

  //app bootstraping file

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';

  import {TodosComponent} from './components/todos/todos';

  @NgModule({
    declarations: [ TodosComponent ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule
    ],
    providers: [],
    bootstrap:    [ TodosComponent ]
  })
  export class AppModule { }

todos.ts (component)


    

  //the todos component

  import { Component } from '@angular/core';

  @Component({
    selector: 'todos',
    templateUrl: 'template.html',
    styleUrls: ['todos.css']
  })

  export class TodosComponent {

    newTodo: string;
    todos: any;
    todoObj: any;

    constructor() {
      this.newTodo = '';
      this.todos = [];
    }

    addTodo(event) {
      this.todoObj = {
        newTodo: this.newTodo,
        completed: false
      }
      this.todos.push(this.todoObj);
      this.newTodo = '';
      event.preventDefault();
    }

    deleteTodo(index) {
      this.todos.splice(index, 1);
    }

    deleteSelectedTodos() {
      //need ES5 to reverse loop in order to splice by index
      for(var i=(this.todos.length -1); i > -1; i--) {
        if(this.todos[i].completed) {
          this.todos.splice(i, 1);
        }
      }
    }

  }

template.html

    

    <div class="todos">

      <div>
      <form (submit)="addTodo($event)">
      <input [(ngModel)]="newTodo" (keyup.enter)="newTodo=''" class="textfield" name="newTodo">
        <button  type="submit" [disabled]="newTodo===''">Add Todo
      </form>
      </div>

      <div [hidden]="newTodo">
        Type in a new todo...
      </div>

      <div [hidden]="!newTodo">
        <!-- Another two-way binding example -->
        Typing: {{ newTodo }}
      </div>

      <ul>
      <li *ngFor="let todo of todos; let i=index">
        <input type="checkbox" class="checkbox" [(ngModel)]="todo.completed" />
      <span [ngClass]="{'checked': todo.completed}">{{ todo.newTodo }}
      <span (click)="deleteTodo(i)" class="delete-icon">[X]
        </li>
        </ul>

        <div class="mtop20">
      <button (click)="deleteSelectedTodos()">Delete Selected
      </div>

  </div>

todos.css

    
  //todos.css

  .box1 {
    border: solid 1px #006699;
    padding: 20px;
    background: #f3f3f3;
    border-radius: 5px;
  }

  .todos input.textfield {
    width: 480px;
    height: 36px;
    margin-right: 20px;
    font-size: 1.4em;
    vertical-align: top;
  }

  .todos input.checkbox {
    width: 20px;
    height: 20px;
  }

  .todos .checked {
    text-decoration: line-through;
  }

  .todos button {
    height: 36px;
    font-size: 1.1em;
    vertical-align: top;
    border: solid 1px #999;
    border-radius: 2px;
  }

  .todos .delete-icon {
    diplay: inline-block;
    cursor: pointer;
  }