Chapter 5: Directives in Angular

What Are Directives?

• Component Directives – With templates
• Structural Directives – Change the DOM layout (e.g., *ngIf, *ngFor)
• Attribute Directives – Change the appearance or behavior of elements (e.g., [ngClass])

marks.html
<h2>Student Marks Summary</h2>

<p>Total Marks: {{ total }}</p>
<p>Average Marks: {{ average }}</p>

<!-- Using *ngIf to conditionally show messages -->
<p *ngIf="average >= 90">Excellent performance! 🎉</p>
<p *ngIf="average < 90">Keep working hard! 💪</p>

<h2>Student Marks Summary</h2>

<p>Total Marks: {{ total }}</p>
<p>Average Marks: {{ average }}</p>

<!-- if / else if / else logic using ng-template -->
<p *ngIf="average >= 90; else goodMarks">Excellent performance! 🎉</p>

<ng-template #goodMarks>
  <p *ngIf="average >= 75; else improvement">Good performance! 👍</p>
</ng-template>

<ng-template #improvement>
  <p>Needs improvement! 📚</p>
</ng-template>

*ngFor

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

Built-in Attribute Directive: [ngClass]

<h2>Student Marks Summary</h2>

<p>Total Marks: {{ total }}</p>
<p>Average Marks: {{ average }}</p>

<!-- Apply pass/fail class using [ngClass] -->
<div [ngClass]="{ 'pass': average >= 40, 'fail': average < 40 }">
  Result Status
</div>

Creating Custom Attribute Directive

Step 1: Create Directive

ng generate directive highlight
  

Step 2: Add Logic

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

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

  @HostListener('mouseenter') onMouseEnter() {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');
  }
}
  

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

Creating Custom Structural Directive

<!-- ✅ Step 1: Generate Directive -->
ng generate directive highlight

<!-- ✅ Step 2: highlight.directive.ts -->
import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]',
  standalone: true
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'lightyellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');
  }
}

<!-- ✅ Step 3: marks.component.ts -->
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HighlightDirective } from './highlight.directive';

@Component({
  selector: 'app-marks',
  standalone: true,
  imports: [CommonModule, HighlightDirective],
  templateUrl: './marks.component.html',
  styleUrl: './marks.component.css'
})
export class MarksComponent {
  mathematics = 85;
  science = 78;
  english = 92;
  hindi = 88;
  history = 74;
  computerScience = 95;
}

<!-- ✅ Step 4: marks.component.html -->
<h2>Student Marks Table</h2>

<table border="1">
  <tr>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr appHighlight>
    <td>Mathematics</td>
    <td>{{ mathematics }}</td>
  </tr>
  <tr appHighlight>
    <td>Science</td>
    <td>{{ science }}</td>
  </tr>
  <tr appHighlight>
    <td>English</td>
    <td>{{ english }}</td>
  </tr>
  <tr appHighlight>
    <td>Hindi</td>
    <td>{{ hindi }}</td>
  </tr>
  <tr appHighlight>
    <td>History</td>
    <td>{{ history }}</td>
  </tr>
  <tr appHighlight>
    <td>Computer Science</td>
    <td>{{ computerScience }}</td>
  </tr>
</table>

Best Practices

• Use *ngIf and *ngFor to conditionally render DOM elements.
• Use [ngClass] or [ngStyle] for dynamic styles.
• Create custom directives to keep templates clean and behavior reusable.
• Prefer Renderer2 for DOM manipulation to ensure compatibility.

Conclusion

Next Steps