How to Create a Todo App in Angular: Step-by-Step Guide

To create a todo app in Angular, define a component with a list to store tasks and use two-way binding with [(ngModel)] to capture input. Use event binding like (click) to add and remove tasks dynamically in the template.

Syntax

An Angular todo app uses a component with a TypeScript class and an HTML template. The class holds the todo list array and methods to add or remove items. The template uses *ngFor to display todos, [(ngModel)] for input binding, and (click) to handle button clicks.

typescript

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

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.css']
})
export class TodoComponent {
  todos: string[] = [];
  newTodo: string = '';

  addTodo() {
    if (this.newTodo.trim()) {
      this.todos.push(this.newTodo.trim());
      this.newTodo = '';
    }
  }

  removeTodo(index: number) {
    this.todos.splice(index, 1);
  }
}

Example

This example shows a complete Angular todo app component with input, add button, and a list of tasks. You can add new todos and remove existing ones by clicking the remove button.

typescript

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

@Component({
  selector: 'app-todo',
  template: `
    <h2>Todo List</h2>
    <input [(ngModel)]="newTodo" placeholder="Add new todo" />
    <button (click)="addTodo()">Add</button>
    <ul>
      <li *ngFor="let todo of todos; let i = index">
        {{ todo }} <button (click)="removeTodo(i)">Remove</button>
      </li>
    </ul>
  `,
  styles: [`
    h2 { font-family: Arial, sans-serif; }
    input { margin-right: 8px; padding: 4px; }
    button { margin-left: 4px; }
    ul { padding-left: 20px; }
    li { margin-bottom: 6px; }
  `]
})
export class TodoComponent {
  todos: string[] = [];
  newTodo: string = '';

  addTodo() {
    if (this.newTodo.trim()) {
      this.todos.push(this.newTodo.trim());
      this.newTodo = '';
    }
  }

  removeTodo(index: number) {
    this.todos.splice(index, 1);
  }
}

Output

A webpage showing a heading 'Todo List', an input box with placeholder 'Add new todo', an 'Add' button, and below a list of todos with each item having a 'Remove' button.

Common Pitfalls

Common mistakes include forgetting to import FormsModule in your Angular module, which is required for [(ngModel)] to work. Another is not trimming input, which can add empty or whitespace-only todos. Also, modifying the array incorrectly can cause UI not to update.

typescript

/* Wrong: Missing FormsModule import causes ngModel error */
// In app.module.ts
// import { FormsModule } from '@angular/forms';
// @NgModule({ imports: [BrowserModule /*, FormsModule missing*/] })

/* Right: Import FormsModule to enable ngModel */
// import { FormsModule } from '@angular/forms';
// @NgModule({ imports: [BrowserModule, FormsModule] })

Quick Reference

• Component: Holds todo list and methods.
• [(ngModel)]: Two-way data binding for input.
• *ngFor: Loop to display todos.
• (click): Event binding for buttons.
• FormsModule: Must be imported for ngModel.

Key Takeaways

Use a component with a todo array and methods to add/remove tasks.

Bind input with [(ngModel)] and handle button clicks with (click).

Import FormsModule in your module to enable ngModel binding.

Use *ngFor to display the list dynamically in the template.

Trim input to avoid adding empty or whitespace-only todos.