Todo List With Angular Js

Introduction:

In today's fast-paced world, being organized and managing tasks effectively is critical to personal and professional success. Fortunately, technology provides powerful tools to help us exercise responsibility. In this article, we'll learn how to leverage Angular.js to create dynamic and interactive to-do lists that will increase your productivity and keep you organized.

What is Angular.js?

Angular.js is a popular JavaScript framework developed by Google that simplifies web application development. It offers a comprehensive set of features and tools for building dynamic and responsive user interfaces. Angular.js follows the Model-View-Controller (MVC) architectural pattern, which allows developers to create structured and maintainable code.

To build a project:

To get started with our to-do list app, we need to create a new Angular.js project. Start installing Angular.js using Node Package Manager (npm) with the following command:

npm install -g @angular/cli

Next, create a new Angular.js project using the Angular CLI :

ng new todo-list-app

This will create the basic structure and files we need for our process.

To create a task list component:

In Angular.js, components are the main part of the user interface. Create a new component for our task list. Run the following command in your project directory:

ng generate component todo-list

This will create a new directory called todo-list with the necessary files for our component.

Make a to-do list:

In our todo-list component, we will define the logic and behavior of our task list. Open the todo-list.component.ts file and import the required modules:

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

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent {
  tasks: string[] = [];

  addTask(task: string): void {
    this.tasks.push(task);
  }

  removeTask(index: number): void {
    this.tasks.splice(index, 1);
  }
}

In the code snippet above, we define a TodoListComponent class that contains an array called tasks to hold our to-dos. There are also two methods: addTask and removeTask that allow you to add and remove tasks from the list.

Create a user interface:

To create the user interface for our task list, open the file todo-list.component.html. Replace the existing code with this:

<h2>My To-Do List</h2>

<input type="text" [(ngModel)]="taskInput" placeholder="Enter a new task">
<button (click)="addTask(taskInput)">Add Task</button>

<ul>
  <li *ngFor="let task of tasks; let i = index">
    {{ task }}
    <button (click)="removeTask(i)">Remove</button>
  </li>
</ul>

The code snippet above contains a header that shows the name of our task list. We also have input fields to enter new tasks and buttons to add them. * The ngFor directive is used to iterate over a collection of tasks and display each task with a delete button.

Check out the to-do list:

To see our list of tasks, open a terminal and navigate to your project directory. Run the following command:

ng serve

This will start the development server and you can see the task list application by going to http://localhost:4000 in your web browser.

The results:

Creating dynamic and interactive task lists with Angular.js is very easy. In this article, we have covered the basics of building a to-do list application using Angular.js, from building the project to running it. Don't forget to learn more and customize your program to fit your needs. Embrace the power of Angular.js and increase your productivity by staying organized and on top of your tasks.