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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @import 'bootstrap/dist/css/bootstrap.css';

    chevron_right

    
    

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!--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>

    chevron_right

    
    

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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);
        }
    }

    chevron_right

    
    

  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:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.