🎮 Angular Control Flow: The Traffic Controller of Your App

Imagine you’re a traffic controller at a busy intersection. Cars (data) are coming from everywhere, and YOU decide:

• Which cars go through (show this content)
• Which cars wait (hide this content)
• Which lane each car takes (show different content based on conditions)

That’s exactly what Angular Control Flow does for your templates!

🚦 The Big Picture

Angular 17+ introduced a brand new way to control what shows up on your screen. Think of it like having magic traffic signs that appear and disappear based on rules you set.

graph TD
    A[Your Data] --> B{Control Flow}
    B -->|if| C[Show This?]
    B -->|for| D[Repeat This?]
    B -->|switch| E[Which One?]
    C --> F[Display Content]
    D --> F
    E --> F

🎯 The @if Block - The Bouncer

What Is It?

Think of @if like a bouncer at a club. The bouncer checks if you meet the requirements. If yes, you get in. If no, you stay outside!

Simple Example

Scenario: Show a welcome message only if the user is logged in.

@if (isLoggedIn) {
  <p>Welcome back, friend! 🎉</p>
}

What happens?

• If isLoggedIn is true → Message appears!
• If isLoggedIn is false → Nothing shows

The @else Friend

Sometimes you want to show something ELSE when the condition is false. Like a sign that says “Sorry, we’re closed!”

@if (isLoggedIn) {
  <p>Welcome back! 🎉</p>
} @else {
  <p>Please log in first 🔐</p>
}

The @else if Chain

What if you have MULTIPLE conditions? Like checking age groups:

@if (age < 13) {
  <p>Kid's Menu 🍕</p>
} @else if (age < 20) {
  <p>Teen Menu 🍔</p>
} @else {
  <p>Adult Menu 🥗</p>
}

It’s like a waterfall:

1. Check first condition
2. If false, check next
3. Keep going until one is true
4. If none are true, use @else

🔄 The @for Block - The Copy Machine

What Is It?

Imagine you have a magic copy machine. You put ONE template in, and it creates copies for every item in your list!

Simple Example

Scenario: You have a list of fruits. Show each one.

// In your component
fruits = ['Apple', 'Banana', 'Cherry'];

@for (fruit of fruits; track fruit) {
  <p>I love {{ fruit }}! 🍎</p>
}

Output on screen:

I love Apple! 🍎
I love Banana! 🍎
I love Cherry! 🍎

The Magic track Word

Super Important! You MUST use track with @for.

Think of track like name tags at a party. Angular uses these to remember who is who. Without name tags, if someone leaves, Angular might get confused about who’s still there!

<!-- Using the item itself as ID -->
@for (fruit of fruits; track fruit) {
  <p>{{ fruit }}</p>
}

<!-- Using an index number -->
@for (fruit of fruits; track $index) {
  <p>{{ $index }}: {{ fruit }}</p>
}

<!-- Using a unique ID (best practice!) -->
@for (user of users; track user.id) {
  <p>{{ user.name }}</p>
}

Built-in Variables (Free Gifts! 🎁)

When you use @for, Angular gives you FREE helper variables:

Fun Example:

@for (friend of friends; track friend.id) {
  <div>
    @if ($first) {
      <span>👑</span>
    }
    {{ friend.name }}
    @if ($last) {
      <span>🏁</span>
    }
  </div>
}

The @empty Helper

What if your list is EMPTY? Show a friendly message!

@for (item of cart; track item.id) {
  <p>{{ item.name }}</p>
} @empty {
  <p>Your cart is empty! 🛒</p>
}

🔀 The @switch Block - The Sorting Hat

What Is It?

Remember the Sorting Hat from Harry Potter? It looks at a student and says “You belong in Gryffindor!” or “You belong in Slytherin!”

@switch does the same thing - it looks at a value and picks the matching case!

Simple Example

Scenario: Show different greetings based on time of day.

// In your component
timeOfDay = 'morning';

@switch (timeOfDay) {
  @case ('morning') {
    <p>Good morning! ☀️</p>
  }
  @case ('afternoon') {
    <p>Good afternoon! 🌤️</p>
  }
  @case ('evening') {
    <p>Good evening! 🌙</p>
  }
  @default {
    <p>Hello there! 👋</p>
  }
}

When to Use @switch vs @if

Good @switch:

@switch (status) {
  @case ('pending') { <span>⏳</span> }
  @case ('approved') { <span>✅</span> }
  @case ('rejected') { <span>❌</span> }
}

Good @if:

@if (score > 90) {
  <p>Excellent!</p>
}

🏷️ Track Expression - The Name Tag System

Why Track Matters

Imagine you have 100 students in a classroom. The teacher needs to know WHO is WHO. If a new student joins or one leaves, the teacher shouldn’t have to re-learn everyone’s name!

track gives each item a unique ID so Angular can:

• ✅ Update ONLY what changed
• ✅ Keep the page fast
• ✅ Avoid flickering

Track Options

Option 1: Track by the item itself (simple data)

@for (color of colors; track color) {
  <span>{{ color }}</span>
}

Best for: simple strings or numbers

Option 2: Track by index (position number)

@for (item of items; track $index) {
  <span>{{ item }}</span>
}

Best for: static lists that don’t change

Option 3: Track by unique ID (BEST PRACTICE! 🏆)

@for (user of users; track user.id) {
  <div>{{ user.name }}</div>
}

Best for: objects with unique IDs

Option 4: Track by function

@for (product of products;
      track trackByProductId(product)) {
  <div>{{ product.name }}</div>
}

trackByProductId(product: Product) {
  return product.id;
}

Best for: complex tracking logic

Common Mistakes ❌

<!-- ❌ WRONG: No track! -->
@for (item of items) {
  <p>{{ item }}</p>
}

<!-- ✅ CORRECT: Has track! -->
@for (item of items; track item.id) {
  <p>{{ item }}</p>
}

🎨 Putting It All Together

Let’s build a Task Manager using everything we learned!

<h1>My Tasks 📋</h1>

@if (tasks.length > 0) {
  @for (task of tasks; track task.id) {
    <div class="task">
      <!-- Position badge -->
      <span>{{ $index + 1 }}.</span>

      <!-- Task name -->
      <span>{{ task.name }}</span>

      <!-- Status with switch -->
      @switch (task.status) {
        @case ('pending') {
          <span>⏳ Waiting</span>
        }
        @case ('doing') {
          <span>🔨 In Progress</span>
        }
        @case ('done') {
          <span>✅ Complete</span>
        }
        @default {
          <span>❓ Unknown</span>
        }
      }

      <!-- Special badges -->
      @if ($first) {
        <span>⭐ First!</span>
      }
    </div>
  } @empty {
    <p>No tasks yet!</p>
  }
} @else {
  <p>Loading tasks... ⏳</p>
}

🧠 Quick Memory Tips

🚀 Key Takeaways

1. @if = Show content when condition is true
2. @else = Fallback when @if is false
3. @for = Repeat content for each list item
4. track = REQUIRED with @for (like a name tag)
5. @empty = Show when list has no items
6. @switch = Pick from multiple exact-match options
7. @default = Fallback when no @case matches

You’re now the Traffic Controller of your Angular app! 🚦

Go forth and direct that data! 🎮