To-Do List in Angular – A Beginner’s Guide

When it comes to creating a to-do list application, Angular is a great choice due to its simplicity and flexibility. In this article, we will explore the steps to create a to-do list using Angular and how to host the code on GitHub for easy access and collaboration.

Setting Up the Development Environment

Before diving into coding, we need to ensure that our development environment is set up properly. Here’s what you need:

• Node.js – Install Node.js from the official website (https://nodejs.org). Verify the installation by running node -v and npm -v commands in your terminal.
• Angular CLI – Install Angular CLI globally by running npm install -g @angular/cli in your terminal.
• Text Editor – You can use any code editor of your choice. Recommended ones include Visual Studio Code, Atom, and Sublime Text.

Creating a New Angular Project

In your terminal, navigate to the desired folder where you want to create your project. Run the following command to create a new Angular project:

ng new todo-list

This command will create a new folder named “todo-list” with the basic structure and dependencies of an Angular project.

Navigate into the project folder:

cd todo-list

Now, we can serve our application using the Angular CLI. Run the following command:

ng serve

This will start a local development server at http://localhost:4200. Open your browser and navigate to this address to see your application running.

Creating the To-Do List

Open your project in the code editor and locate the src/app folder. Inside this folder, open the app.component.html file.

Replace the default content with the following code:

“`html

“`

This code creates a basic structure for our to-do list. It consists of an input field and a button to add new tasks. The tasks are displayed as a list and can be removed individually.

Now, open the app.component.ts file located in the same folder. Replace the default code with the following:

“`javascript
import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
tasks: string[] = [];
newTask: string = ”;

addTask() {
if (this.newTask) {
this.tasks.push(this.newTask);
this.newTask = ”;
}
}

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

This code defines the logic for adding and removing tasks. Whenever the Add Task button is clicked or the Enter key is pressed, the addTask() method is called, which adds the new task to our tasks array. Similarly, when the Remove button is clicked, the respective task is removed from the array using the removeTask() method.

Hosting the Code on GitHub

To host your code on GitHub, follow these steps:

1. Create a new repository on GitHub by clicking on the “New” button. Choose a name and make the repository public or private as per your preference.
2. After creating the repository, you will see a set of instructions provided by GitHub. Run those commands in your terminal to initialize the repository and push your code to GitHub.
3. Once the code is pushed, you can access it on your GitHub repository page.

Now, you have your to-do list application on GitHub, and you can share the repository URL with others for collaboration or reference.

Congratulations! You have successfully created a to-do list application using Angular and hosted it on GitHub. Now you can explore further enhancements like persistent storage using APIs or adding additional features to your to-do list.