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'
```

Output:

Build a Simple Web App with Express & Angular

ajaychawla

Improve

Article Tags :

How to Create Todo List in Angular 7 ?

Similar Reads

Thank You!

What kind of Experience do you want to share?