How to Create Todo List in Angular 7 ?

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:

1. Create a new angular app using following command:

   ng new my-todo-list

2. 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

3. Install bootstrap using the following command:

   npm install bootstrap

   Edit style.css file in the project

   @import 'bootstrap/dist/css/bootstrap.css';
4. Open src/app folder and start editing app.component.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>
5. Open app.component.ts file and write functions for adding and deleting tasks.

   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);
       }
   }
6. For working with forms that is taking input we have to import FormsModule in app.module.ts file.

   import { FormsModule } from '@angular/forms'

Output: