Open In App

How to Create Todo List in Angular 7 ?

Last Updated : 14 May, 2020
Like Article

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.


  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">
        <!--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"
                <div class="col-1"></div>
                <button (click)="addToList()" 
                    class="btn btn-light text-success">
                    ADD TASK
            <div class="col-3 d-none col-md-3 d-md-block"></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 class="col-3 d-none col-md-3 d-md-block"></div>


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

    import { Component } from '@angular/core';
        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.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'


Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads