Todo List in Angular

We use the ToDo app to aid in helping us remember certain crucial tasks. We just add the tasks, complete them, and then remove them. Numerous Bootstrap classes are used in this to-do list to provide our web application both aesthetic appeal and responsiveness.

Approach:

Step:1  Use the following command to start a new angular app:

ng new Demo

Step:2  Make use of the following command to install bootstrap:

npm install bootstrap

• the project’s style.css file, then edit it:

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

Step:3  Add this to app.component.html:

<div class="container p-5">
  <div class="card w-50 p-5">
    <h1>{{title}}</h1>
    <input type="text" placeholder="Enter New Task" #task/>
    <br>
    <br>
    <div >
      <button class="btn-success btn" (click)="addTask(task.value)">Add Task</button>
    </div>
    <br>
    <table class="table w-100">
      <thead>
        <tr>
          <th>name</th>
          <th style="text-align: end;">Action</th>
        </tr>
      </thead>
      <tbody>
        <tr  *ngFor="let item of list; let i = index">
          <td>{{item.name}}</td>
          <td style="text-align: end;" > <button  class="btn btn-danger" (click)="removeTask(i)">delete</button></td>
        </tr>
     </tbody>
    </table>
  </div>
</div>

Step:4  Add this to app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'todo-list';
  list:any[]=[];
  length: any;

  addTask(item:string){
    this.list.push({
      id:this.length,
      name:item
    })
  }
  removeTask(index:number){
   if(index >-1){
    this.list.splice(index,1);
   }
  }
}

Step:5  Add this to  app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Out Put:-