Directives in Angular

# CHAPTER 7

Directives in Angular #

1. Chapter Introduction #

2. Learning Objectives #

• Use *ngIf to conditionally render elements.

• Use *ngFor to render lists from arrays.

• Use *ngSwitch for multi-branch conditions.

• Create a custom attribute directive.

3. *ngIf — Conditional Rendering #

export class AuthComponent {
  isLoggedIn: boolean = false;
  toggleLogin(): void { this.isLoggedIn = !this.isLoggedIn; }
}

<button (click)="toggleLogin()">Toggle Login</button>
<div *ngIf="isLoggedIn"><h2>Welcome back!</h2></div>
<div *ngIf="!isLoggedIn"><h2>Please log in.</h2></div>

4. *ngFor — Rendering Lists #

export class ProductListComponent {
  products = [
    { id: 1, name: 'Laptop', price: 999 },
    { id: 2, name: 'Phone', price: 599 }
  ];
}

<ul>
  <li *ngFor="let product of products; let i = index">
    {{ i + 1 }}. {{ product.name }} — ${{ product.price }}
  </li>
</ul>

5. *ngSwitch #

<div [ngSwitch]="status">
  <p *ngSwitchCase="&#039;loading'">⏳ Loading...</p>
  <p *ngSwitchCase="&#039;success'">✅ Loaded!</p>
  <p *ngSwitchCase="&#039;error'">❌ Error!</p>
  <p *ngSwitchDefault>Unknown state.</p>
</div>

6. [ngClass] — Attribute Directive #

<div [ngClass]="{
  &#039;alert-success': alertType === 'success',
  &#039;alert-error':   alertType === 'error'
}">Alert Message</div>

7. Custom Attribute Directive #

ng g directive highlight

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

@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.el.nativeElement.style.backgroundColor = '#f0f4ff';
  }
  @HostListener('mouseleave') onMouseLeave() {
    this.el.nativeElement.style.backgroundColor = 'transparent';
  }
}

<p appHighlight>Hover over me to highlight!</p>

8. Modern Angular: @if and @for (v17+) #

@if (isLoggedIn) { <p>Welcome!</p> } @else { <p>Please log in.</p> }

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

9. Common Mistakes #

• Forgetting *: ngIf without the asterisk fails silently. Always use *ngIf.

• No trackBy on large lists: Omitting trackBy causes full list re-renders on every change.

10. MCQs with Answers #

11. Interview Questions #

• Q: Difference between a Structural Directive and an Attribute Directive?

• Q: Why is trackBy important with *ngFor for performance?

12. Summary #

13. Next Chapter Recommendation #