Directives and Control Flow

Level: Beginner

ℹ️ What You'll Learn

• Structural directives (*ngIf, *ngFor, *ngSwitch)
• Conditional rendering
• Lists and loops
• Attribute directives
• Custom directives

*ngIf — Conditional

<!-- Show if true -->
<div *ngIf="isActive">Student is active</div>

<!-- Show if false -->
<div *ngIf="!isActive">Student is inactive</div>

<!-- if-else -->
<div *ngIf="isActive; else inactive">Active</div>
<ng-template #inactive>Inactive</ng-template>

<!-- if-then-else -->
<div *ngIf="isActive; then active else inactive"></div>
<ng-template #active>Active student</ng-template>
<ng-template #inactive>Inactive student</ng-template>

Removes/adds element from DOM.

*ngFor — Loops

<!-- Simple loop -->
<tr *ngFor="let student of students">
  <td>{{ student.name }}</td>
  <td>{{ student.className }}</td>
</tr>

<!-- With index -->
<div *ngFor="let student of students; let i = index">
  {{ i + 1 }}. {{ student.name }}
</div>

<!-- With first/last -->
<div *ngFor="let student of students; let first = first; let last = last">
  <span *ngIf="first">FIRST: </span>
  {{ student.name }}
  <span *ngIf="last"> :LAST</span>
</div>

<!-- With trackBy (performance) -->
<tr *ngFor="let student of students; trackBy: trackByStudentId">
  <td>{{ student.name }}</td>
</tr>

In component:

trackByStudentId(index: number, student: any) {
  return student.id;
}

trackBy = avoid re-rendering entire list on change.

*ngSwitch — Cases

<div [ngSwitch]="studentStatus">
  <div *ngSwitchCase="'Active'">Student is active</div>
  <div *ngSwitchCase="'Inactive'">Student inactive</div>
  <div *ngSwitchCase="'Graduated'">Student graduated</div>
  <div *ngSwitchDefault>Unknown status</div>
</div>

Like switch statement in code.

Attribute Directives

<!-- Built-in -->
<div [ngClass]="{'active': isActive, 'disabled': !isEnabled}">
  Status
</div>

<div [ngStyle]="{'color': statusColor, 'background': statusBg}">
  Colored text
</div>

In component:

statusColor = 'green';
statusBg = '#f0f0f0';

SMS Example

<div *ngIf="loading">Loading students...</div>

<div *ngIf="!loading && error" class="error">
  {{ error }}
</div>

<table *ngIf="!loading && students.length > 0">
  <tbody>
    <tr *ngFor="let student of students; trackBy: trackById">
      <td>{{ student.rollNumber }}</td>
      <td>{{ student.name }}</td>
      <td>
        <span [ngClass]="student.status === 'Active' ? 'badge-success' : 'badge-danger'">
          {{ student.status }}
        </span>
      </td>
      <td>
        <button (click)="viewStudent(student.id)">View</button>
        <button (click)="deleteStudent(student.id)" [disabled]="deleting === student.id">
          Delete
        </button>
      </td>
    </tr>
  </tbody>
</table>

<div *ngIf="!loading && students.length === 0">
  No students found
</div>

In component:

students: any[] = [];
loading = false;
error: string | null = null;
deleting: number | null = null;

trackById(index: number, student: any) {
  return student.id;
}

Key Takeaways

• *ngIf = conditional rendering
• *ngFor = loop through arrays
• *ngSwitch = multiple cases
• trackBy = performance optimization
• [ngClass] = dynamic classes
• [ngStyle] = dynamic styles
• ng-template = hidden template

💡 Backend Developer Tip

Directives = like helper methods in ASP.NET Razor. *ngFor like @foreach, *ngIf like @if in Razor syntax.

⚠️ Directive Issues

1. Forgetting * prefix — Not a directive, just property
2. Using object without trackBy — Performance issues on re-render
3. ngClass with wrong syntax — Dictionary vs string
4. Complex logic in template — Move to component method

🤖Use AI to Learn Faster

Use ChatGPT, Claude, or Copilot to go deeper on Angular Directives. Try these prompts:

• "Why use trackBy in ngFor?"
• "What's difference between ngClass and class binding?"
• "When use ngSwitch vs if-else?"
• "Quiz me on directives"

💡 Tip: After reading this article, paste your own code into AI and ask "What could go wrong here and why?" — fastest way to find edge cases and deepen understanding.