How to Create Todo List in Angular 7 ?

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-listMove inside the app by cd and run. After that open local host and check if the app is working.cd my-todo-list
ng serveInstall bootstrap using the following command:npm install bootstrapEdit style.css file in the project@import 'bootstrap/dist/css/bootstrap.css';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>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);    }}For working with forms that is taking input we have to import FormsModule in app.module.ts file.import { FormsModule } from '@angular/forms'
Create a new angular app using following command:ng new my-todo-list
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
cd my-todo-list
ng serve
Install bootstrap using the following command:npm install bootstrapEdit style.css file in the project@import 'bootstrap/dist/css/bootstrap.css';
npm install bootstrap
Edit style.css file in the project
@import 'bootstrap/dist/css/bootstrap.css';
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>
<!--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.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);    }}
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'
import { FormsModule } from '@angular/forms'
Output:
AngularJS-Misc
Picked
AngularJS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Auth Guards in Angular 9/10/11
Routing in Angular 9/10
How to bundle an Angular app for production?
What is AOT and JIT Compiler in Angular ?
Angular PrimeNG Dropdown Component
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?