How to Create Todo List in Angular 7 ? Last Updated : 14 May, 2020 Comments Improve Suggest changes Like Article Like Report 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: Comment More infoAdvertise with us Next Article Build a Simple Web App with Express & Angular A ajaychawla Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Misc Similar Reads How to Create Todo List in Angular 7 ? 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: 2 min read Build a Simple Web App with Express & Angular Building a simple web app using Express and Angular is a great way to understand the fundamentals of full-stack development. Express, a minimalist web framework for Node.js, handles the backend, while Angular, a powerful front-end framework, provides the structure for the client-side application.In 5 min read How to build progressive web app(PWA) in Angular 9 ? In this article, we will develop a PWA (Progressive Web App) using Angular. What is PWA ? Progressive Web Apps (PWAs) are web applications that have been designed so that they are capable, reliable, and installable. PWA are built and enhanced with modern APIs to deliver enhanced capabilities, reliab 7 min read Routing in Angular 9/10 Routing in Angular allows the users to create a single-page application with multiple views and allows navigation between them. Users can switch between these views without losing the application state and properties. Approach: Create an Angular app that to be used.Create the navigation links inside 3 min read How to create a To-Do list using Drag and Drop in Angular 7 ? We can easily create a To-Do list using Drag-Drop module provided by angular Component Development Kit (CDK). First of all, create an angular component by using the following command- ng g c To-Do Now import CdkDragDrop, moveItemInArray, transferArrayItem from @angular/cdk/drag-drop to our to-Do com 2 min read How to make a multi-select dropdown using Angular 11/10 ? In this article, we will learn to build the multiple selection drop-down menu in Angular. To accomplish this task, we require Angular 10 or the Angular 11 version. Sometimes we need to display dynamically fetched multi-selected data in a drop-down menu, for this, we will use the npm @ng-select/ng-se 3 min read How to set focus on input field automatically on page load in AngularJS ? We can focus on any input field automatically using the angular directives. Here we create a custom directive that can auto-focus on any field in the form. Creating a custom directive is just like creating an Angular component. To create a custom directive we have to replace @Component decorator wit 3 min read How to Scroll to an Element on click in Angular ? In this article, we will see how to scroll to an element on click in Angular. Here, we will create a component that enables scrolling to specific targets when a button is pressed within the document from one target to another.Steps for Installing & Configuring the Angular ApplicationStep 1: Crea 4 min read AngularJS $locationProvider The $locationProvider facilitates the configuration of the application by implementing the deep linking paths that are stored. Here are some of the things that can be made with the $locationProvider service: Set the html5Mode property to true to enable HTML5 mode, which uses the history.pushState AP 4 min read AngularJS $location Service The $location in AngularJS basically uses a window.location service. The $location is used to read or change the URL in the browser and it is used to reflect that URL on our page. Any change made in the URL is stored in the $location service in AngularJS. There are various methods in the $location s 4 min read Like