Building a Simple To-Do App!

Welcome to the world of Angular, where we turn complex web development into a fun and rewarding journey! If you’ve ever dreamed of building a dynamic web application, you’re in the right place. In this post, we’ll guide you through setting up Angular and creating your very first To-Do app. Ready to get started? Let’s dive in!

🌟 Step 1: Setting Up Your Angular Playground

Before we can build anything, we need to prepare our workspace. Think of it as setting up your art studio before starting your masterpiece.

🎨 Install Node.js and npm

Angular needs Node.js and npm (Node Package Manager) to run. Download and install them from the Node.js website.

To check if they’re installed correctly, open your terminal and run:

node -v
npm -v

You should see the version numbers pop up. Hooray, you’re ready to go!

🛠️ Install Angular CLI

The Angular CLI (Command Line Interface) is like your magic wand for creating and managing Angular projects. Install it globally using npm:

npm install -g @angular/cli

Verify the installation by running:

ng version

You should see Angular CLI’s version. Perfect!

🏗️ Create Your First Angular Project

Let’s start our project! In your terminal, navigate to the directory where you want to create your project and run:

ng new my-todo-app

Follow the prompts, and choose the default settings for simplicity. Once the setup is complete, move into your project directory:

cd my-todo-app

Start the development server with:

ng serve

Open your browser and go to http://localhost:4200. Voilà! You should see a welcoming Angular page.

🛠️ Step 2: Crafting Your To-Do App

Now comes the fun part—building our To-Do app! We’ll create a simple app where you can add and view tasks.

🧱 Generate a New Component

Components are like the building blocks of our app. Let’s create one for our To-Do list:

 ng generate component todo

This command generates a folder with files for our component.

🎨 Design Your To-Do List

Open src/app/todo/todo.component.html and add the following HTML:

<h2>My To-Do List</h2>
<input [(ngModel)]="newTask" placeholder="Add a new task" />
<button (click)="addTask()">Add</button>

<ul>
  <li *ngFor="let task of tasks">{{ task }}</li>
</ul>

🛠️ Add Functionality

Open src/app/todo/todo.component.ts and add the following code:

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

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

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

🖌️ Style Your App

Feel free to add some styles in src/app/todo/todo.component.css to make your To-Do app look snazzy. For example:

cssCopy codeh2 {
  color: #007bff;
}

input {
  margin-right: 10px;
}

🎉 Step 3: Enjoy Your To-Do App!

Refresh your browser, and you should see your To-Do app in action. You can now add tasks and see them listed in your app.

🚀 Conclusion

Congratulations! You’ve just created your first Angular app. With Angular’s power and your creativity, the possibilities are endless.

Stay tuned for more Angular adventures and tips. Happy coding! 🎉