🌟 Day 1 — Your First Angular 20 App (From Zero to Hero)

Welcome to Day 1 of your Angular From Zero to Hero series! Today, you will:

• ✔️ Install everything you need
• ✔️ Create your first Angular 20 app
• ✔️ Understand standalone components
• ✔️ Build and run your very first feature
• ✔️ Customize your app like a pro

This will be fun, hands-on, and practical — no fluff. Let’s build something real!

---

## 🚀 Step 1: Install Node.js (The Engine Behind Angular)

👉 Angular requires Node.js and npm. Download from the official website:

🔗 https://nodejs.org/

✔️ After installing, verify:

node -v
npm -v

If both print versions, you’re ready.

---

## 🚀 Step 2: Install Angular CLI

Angular CLI (Command Line Interface) gives you commands like ng serve, ng generate, etc.

Run:

npm install -g @angular/cli

Verify:

ng version

If you see Angular CLI 17/18/19/20 (anything modern), you’re good to go.

---

## 🚀 Step 3: Create Your First Angular 20 App

In your terminal:

ng new my-first-app --standalone

Angular will ask:

• “Would you like to add Angular routing?”
  • 👉 Choose Yes
• “Which stylesheet format?”
  • 👉 Choose SCSS (recommended)

Wait a few seconds… and boom! You now have a real Angular project.

---

## 🚀 Step 4: Run the Application

Move into your project folder:

cd my-first-app

Start the dev server:

npm run start

or

ng serve -o

Your browser opens at:

🔗 http://localhost:4200

🎉 Congratulations — your Angular app is alive!

---

## 🔎 Step 5: Understanding the Project Structure

When you open the folder in VS Code, you’ll see:

src/
 ├─ app/
 │   ├─ app.component.ts
 │   ├─ app.component.html
 │   └─ app.routes.ts
 ├─ assets/
 ├─ main.ts
 └─ index.html

Let’s decode the important parts:

🧩 main.ts

Bootstraps your Angular application using standalone components.

🧩 app.component.ts

Your first Angular component.

🧩 app.routes.ts

Routing configuration for your app.

🧩 index.html

The single page Angular controls.

You’re now in the Angular universe. 💡

---

## 🛠 Step 6: Modify Your First Component

Open: src/app/app.component.html

Replace everything with:

<h1>Welcome to My First Angular App 🎉</h1>

<p>This is your first day of becoming an Angular Hero.</p>

<button (click)="increment()">Clicked {{ counter() }} times</button>

Now open: src/app/app.component.ts

Replace with this signal-based component:

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

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  counter = signal(0);

  increment() {
    this.counter.update(c => c + 1);
  }
}

Refresh the browser → click the button → watch your counter grow ✔️

🎉 You just used Angular Signals on Day 1!

---

## 🧠 Step 7: What You Just Learned

Today you learned:

• ✔️ Installing Angular the correct way
• ✔️ Creating a Standalone Angular Application
• ✔️ Understanding Angular’s folder structure
• ✔️ Updating templates
• ✔️ Adding interactivity with signals
• ✔️ Running Angular locally

You’re already ahead of most beginners.

---

## 🧪 Step 8: Hands-On Challenge (Do This Now)

Create a new component called GreetingComponent:

1. Generate it:

   ng generate component greeting --standalone

2. Make it show:

   Hello Angular! Today I feel: 😁

3. Add a button to toggle the emoji between 😁 and 🤔

4. Import the component into AppComponent and render it.