How to Create Todo List in Angular 7 ? (original) (raw)

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:

  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
    < 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` `> ` < 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` `> ` < 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 { ` public items = [];
    `public newTask; ` public addToList() {
    `if` `(` `this` `.newTask == ` `''` `) { ` }
    `else` `{ ` this .items.push( this .newTask);
    `this` `.newTask = ` `''` `; ` }
    `} ` 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:

Similar Reads