How To Add To Do List In Angular?

Introduction

The ToDo  list  is used to help us to remember some important task. We just add the task and when once finished, remove them. This to-do list uses various Bootstrap classes that make our web application not only attractive but also responsive.

Create a new angular app and generate new component

ng g c  todo

Install angular material UI :

ng add @angular/material

Step 1: todo.component.html

<mat-toolbar>To do list:</mat-toolbar>
<mat-card class="todocard">


  <mat-list role="list">

    <mat-toolbar *ngFor="let item of todoList | async;" class="todoitem" color="primary">
      <mat-toolbar-row>

        <span [ngClass]="{'done-true': item.isDone, 'done-false': !item.isDone}">{{item.content}}</span>
        <span class="example-spacer"></span>
        <mat-icon (click)="markItemAsDone(item)" class="btn" *ngIf="!item.isDone"> check</mat-icon>
        <mat-icon (click)="markItemAsNotDone(item)" class="btn" *ngIf="item.isDone"> undo</mat-icon>

        <mat-icon (click)="editItem(item)" class="btn"> edit</mat-icon>
        <mat-icon (click)="deleteItem(item.id)" class="btn">delete</mat-icon>
      </mat-toolbar-row>
    </mat-toolbar>

  </mat-list>
  <form class="example-form">
    <mat-form-field class="full-width">
      <input matInput placeholder="Enter To do" class="textareafull" [(ngModel)]="inputValue.content" name="inputValue">
    </mat-form-field>
    <span class="example-spacer"></span>
    <button mat-button (click)="addNewItem()" *ngIf="!editValue">Add</button>
    <button mat-button (click)="saveNewItem()" *ngIf="editValue">Save</button>
  </form>

</mat-card>

Step 2: app.component.ts

import { Component, OnInit } from '@angular/core';
import {
  AngularFirestore,
  AngularFirestoreCollection,
  AngularFirestoreDocument
} from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { MatSnackBar } from '@angular/material';

interface Todo {
  content: string;
  id?: string;
  datemodified?: Date;
  isDone?: boolean;
}
@Component({
  selector: 'todo',
  templateUrl: './todo.component.html',
})

export class TodoComponent implements OnInit {
  todoCollection: AngularFirestoreCollection<Todo>;
  todoList: Observable<Todo[]>;
  todoDoc: AngularFirestoreDocument<Todo>;
  inputId: string;
  inputValue: Todo = {
    content: "",
  }

  editValue: boolean = false;
  constructor(public afs: AngularFirestore, public snackBar: MatSnackBar) {
  }
  ngOnInit() {

    this.todoCollection = this.afs.collection('Todolist');
    this.todoList = this.afs.collection('Todolist', ref => ref.orderBy('datemodified')).snapshotChanges().map(changes => {
      return changes.map(a => {
        const data = a.payload.doc.data() as Todo;
        data.id = a.payload.doc.id;
        return data;
      })
    })
  }

  addNewItem() {
    if (this.inputValue.content != "") {
      this.inputValue.datemodified = new Date();
      this.inputValue.isDone = false;
      this.todoCollection.add(this.inputValue);
      this.inputValue.content = "";
      this.openSnackBar("Added Successfuly!", "Dismiss");
    }
  }

  deleteItem(i) {
    this.todoDoc = this.afs.doc(`Todolist/${i}`);
    this.todoDoc.delete();
    this.openSnackBar("Item Deleted!", "Dismiss");
  }
  editItem(i) {
    this.inputValue.content = i.content;
    this.editValue = true;
    this.inputId = i.id;
  }
  markItemAsDone(item) {
    this.inputValue.content = item.content;
    this.inputValue.isDone = true;
    this.todoDoc = this.afs.doc(`Todolist/${item.id}`);
    this.todoDoc.update(this.inputValue);
    this.inputValue.content = "";
    this.openSnackBar("Item Done!", "Dismiss");
  }
  markItemAsNotDone(item) {
    this.inputValue.content = item.content;
    this.inputValue.isDone = false;
    this.todoDoc = this.afs.doc(`Todolist/${item.id}`);
    this.todoDoc.update(this.inputValue);
    this.inputValue.content = "";
    this.openSnackBar("Item Not Done!", "Dismiss");
  }
  saveNewItem() {
    if (this.inputValue.content != "") {
      this.inputValue.isDone = false;
      this.inputValue.datemodified = new Date();
      this.todoDoc = this.afs.doc(`Todolist/${this.inputId}`);
      this.todoDoc.update(this.inputValue);
      this.editValue = false;
      this.inputValue.content = "";
      this.openSnackBar("Updated Successfuly!", "Dismiss");
    }
  }
  openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, {
      duration: 2000,
      verticalPosition: 'top',
    });
  }
  toggleCheck(i) {

  }
}

now using below command  we can see the following output:

ng serve