How to Create Todo List in Angular 7 ?

Last Updated : 14 May, 2020

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

Create a new angular app using following command:
```
ng new my-todo-list
```
Move inside the app by cd and run. After that open local host and check if the app is working.
```
cd my-todo-list ng serve
```
Install bootstrap using the following command:
```
npm install bootstrap
```
Edit style.css file in the project
html
@import 'bootstrap/dist/css/bootstrap.css';

Open src/app folder and start editing app.component.html

html

<!--Division for GeeksForGeeks heading--> <div class="container-fluid"> <div class="row bg-success justify-content-center  align-items-center" style="height:80px"> <div class="col-3"></div> <div class="col-6 text-light h2"> GeeksForGeeks </div> </div> <!--Division for taking input from user --> <div class="row mt-1" style="height:80px;"> <div class="col-3 d-none col-md-3 d-md-block"></div> <div class="col-12 col-md-6 bg-success d-flex   justify-content-center align-items-center   text-light h3"> <input [(ngModel)]="newTask" type="text" value="" class="col-7 form-control" style="width:300px;"> <div class="col-1"></div> <button (click)="addToList()" class="btn btn-light text-success"> ADD TASK </button> </div> <div class="col-3 d-none col-md-3 d-md-block"></div> </div> <!--Tasks added repeated divisions--> <div *ngFor="let x of items; let index = index;" class="row mt-1" style="height:100px;"> <div class="col-3 d-none col-md-3 d-md-block"></div> <div class="col-12 col-md-6 bg-success d-flex  justify-content-center align-items-center  text-light h3"> <div class="col-9 text-light h3">{{x}}</div> <input (click)="deleteTask(index)" type="button" value="Delete" class="col-2 btn btn-danger"> </div> <div class="col-3 d-none col-md-3 d-md-block"></div> </div> </div>

Open app.component.ts file and write functions for adding and deleting tasks.

javascript

import { Component } from '@angular/core'; @Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css'] }) export class AppComponent {  /* An empty array that is responsible  to add a division */  public items = [];  /* A two-way binding performed which  pushes text on division */  public newTask;  /* When input is empty, it will  not create a new division */  public addToList() {  if (this.newTask == '') {  }  else {  this.items.push(this.newTask);  this.newTask = '';  }  }  /* This function takes to input the  task, that has to be deleted*/  public deleteTask(index) {  this.items.splice(index, 1);  } }

For working with forms that is taking input we have to import FormsModule in app.module.ts file.
```
import { FormsModule } from '@angular/forms'
```