Open In App

How to Create Todo List in Angular 7 ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 14 May, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads