📘 Day 3 — Mastering Directives in Angular (ngIf, ngFor, ngSwitch + Custom Directives)

Hands-on Angular tutorial — Zero to Hero, Day 3

Welcome back, hero! Today you will learn:

• ✔️ What directives are
• ✔️ Structural directives: *ngIf, *ngFor, *ngSwitch
• ✔️ Attribute directives: ngClass, ngStyle
• ✔️ How to build your own custom directive
• ✔️ How to apply directives in real-world UI components

Today is SUPER practical — lots of coding ⚡

---

🟦 1. What Is a Directive?

A directive is an instruction for Angular to change the DOM.

Angular has 3 categories:

✔️ 1. Structural Directives

These change the layout of the DOM. They always start with *.

Examples:

• *ngIf
• *ngFor
• *ngSwitch

✔️ 2. Attribute Directives

These modify appearance or behavior of an element.

Examples:

• ngClass
• ngStyle
• custom attribute directives

✔️ 3. Component Directives

A component is technically a directive with a template.

---

🟩 2. Structural Directive #1 — *ngIf

Create a simple toggler.

In app.component.ts:

show = signal(true);

toggle() {
  this.show.update(v => !v);
}

In app.component.html:

<button (click)="toggle()">Toggle Card</button>

<div *ngIf="show()"> 🎉 This card is visible! </div>

• ✔️ *ngIf adds or removes DOM
• ✔️ Uses signals directly inside template

---

🟩 3. Structural Directive #2 — *ngFor

Generate a new component:

ng g component user-list --standalone

user-list.component.ts

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

@Component({
  selector: 'app-user-list',
  standalone: true,
  templateUrl: './user-list.component.html'
})
export class UserListComponent {
  users = signal([
    { name: 'Alice', role: 'Designer' },
    { name: 'Bob', role: 'Developer' },
    { name: 'Charlie', role: 'Product Manager' }
  ]);
}

user-list.component.html

<ul>
  <li *ngFor="let user of users()">
    {{ user.name }} — {{ user.role }}
  </li>
</ul>

• ✔️ Loop through arrays
• ✔️ Access signal values using users()

---

🟩 4. Structural Directive #3 — *ngSwitch

Imagine a user status indicator.

app.component.ts

status = signal('online');

setStatus(s: string) {
  this.status.set(s);
}

app.component.html

<button (click)="setStatus('online')">Online</button>
<button (click)="setStatus('away')">Away</button>
<button (click)="setStatus('offline')">Offline</button>

<div [ngSwitch]="status()">
  <p *ngSwitchCase="'online'">🟢 Online</p>
  <p *ngSwitchCase="'away'">🟡 Away</p>
  <p *ngSwitchCase="'offline'">🔴 Offline</p>
  <p *ngSwitchDefault>⚪ Unknown</p>
</div>

• ✔️ Another fundamental Angular tool
• ✔️ Great for dashboards and state-driven UIs

---

🟨 5. Attribute Directive — ngClass

Let’s style the user status dynamically.

<p [ngClass]="{
  'online': status() === 'online',
  'away': status() === 'away',
  'offline': status() === 'offline'
}">
  Status: {{ status() }}
</p>

styles

.online { color: green; }
.away { color: orange; }
.offline { color: red; }

• ✔️ Applies classes dynamically

---

🟨 6. Attribute Directive — ngStyle

<p [ngStyle]="{ 'font-size': status() === 'online' ? '20px' : '16px' }">
  User status: {{ status() }}
</p>

• ✔️ Use inline dynamic CSS
• ✔️ Useful for responsive UI logic

---

🟥 7. Build Your First Custom Directive (Interactive Highlight)

This is where you level up 💪 Let’s build a “hover highlight” directive.

Generate:

ng g directive hover-highlight --standalone

hover-highlight.directive.ts

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[hoverHighlight]',
  standalone: true
})
export class HoverHighlightDirective {

  @Input('hoverHighlight') highlightColor = 'yellow';

  private originalColor = '';

  constructor(private el: ElementRef) {
    this.originalColor = this.el.nativeElement.style.backgroundColor;
  }

  @HostListener('mouseenter')
  onEnter() {
    this.el.nativeElement.style.backgroundColor = this.highlightColor;
  }

  @HostListener('mouseleave')
  onLeave() {
    this.el.nativeElement.style.backgroundColor = this.originalColor;
  }
}

Use it in your HTML:

<p hoverHighlight="lightblue">Hover me to see the magic ✨</p>

<p hoverHighlight="pink">Hover me too!</p>

• ✔️ Now you understand attribute directives
• ✔️ You wrote DOM behavior code
• ✔️ You used HostListener + ElementRef

This is real frontend engineering.

---

🟦 8. Real-World Example: Todo List With Directives

Create a small todo component:

ng g component todo-list --standalone

todo-list.component.ts

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

@Component({
  selector: 'app-todo-list',
  standalone: true,
  templateUrl: './todo-list.component.html'
})
export class TodoListComponent {
  todos = signal(['Learn Angular', 'Practice Components', 'Master Directives']);
}

todo-list.component.html

<ul>
  <li *ngFor="let todo of todos(); let i = index">
    {{ i + 1 }}. {{ todo }}
  </li>
</ul>

<p *ngIf="todos().length === 0">Nothing to do 🎉</p>

• ✔️ Using *ngFor
• ✔️ Using index
• ✔️ Using *ngIf fallback

---

🎉 End of Day 3 — What You Learned

Today you mastered:

• ✔️ What directives are
• ✔️ Structural directives: *ngIf, *ngFor, *ngSwitch
• ✔️ Attribute directives: ngClass, ngStyle
• ✔️ How to build a custom directive using:
  • @Directive
  • @HostListener
  • @Input
• ✔️ Combined them into real UI components

This is core Angular knowledge. You’re now coding like a real Angular developer.

---

🧪 Day 3 Challenge

Build a directive:

👉 appAutoFocus

Requirements:

1. When an input is rendered, it automatically gets focus.
2. Should work like:

   <input type="text" appAutoFocus />

Hints:

• Use ElementRef
• Use ngAfterViewInit()