Chapter 5: Directives in Angular
Angular directives are powerful tools that let you manipulate the DOM and extend HTML behavior. This chapter focuses on both built-in directives and creating your own custom ones for dynamic and reusable UI components.
What Are Directives?
Directives are classes in Angular that allow you to attach behavior to elements in the DOM. There are three types:
- 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])
Complete Code: 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;
users = [
{ name: 'John Doe' },
{ name: 'Jane Smith' },
{ name: 'Mike Johnson' }
];
get total(): number {
return this.mathematics + this.science + this.english +
this.hindi + this.history + this.computerScience;
}
get average(): number {
return this.total / 6;
}
}
Complete Code: 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', 'yellow');
}
@HostListener('mouseleave') onMouseLeave() {
this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');
}
}
marks.component.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
Used to loop over a collection:
<ul>
<li *ngFor="let user of users">{{ user.name }}</li>
</ul>
Built-in Attribute Directive: [ngClass]
[ngClass] lets you dynamically apply CSS classes based on conditions:
<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>
marks.component.css
.pass {
color: green;
font-weight: bold;
background-color: #d4edda;
padding: 10px;
border-radius: 5px;
}
.fail {
color: red;
font-weight: bold;
background-color: #f8d7da;
padding: 10px;
border-radius: 5px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
tr:hover {
background-color: #f5f5f5;
}
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]',
standalone: true
})
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');
}
}
This directive changes background color on mouse events. Use it like:
<p appHighlight>Hover to highlight me!</p>
Complete Final Code: All Files Together
✅ marks.component.ts (Complete)
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;
users = [
{ name: 'John Doe' },
{ name: 'Jane Smith' },
{ name: 'Mike Johnson' }
];
get total(): number {
return this.mathematics + this.science + this.english +
this.hindi + this.history + this.computerScience;
}
get average(): number {
return this.total / 6;
}
}
✅ highlight.directive.ts (Complete)
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');
}
}
✅ marks.component.html (Complete)
<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>
<!-- Using *ngIf examples -->
<p *ngIf="average >= 90">Excellent performance! 🎉</p>
<p *ngIf="average < 90">Keep working hard! 💪</p>
<!-- ngClass example -->
<div [ngClass]="{ 'pass': average >= 40, 'fail': average < 40 }">
Result Status: {{ average >= 40 ? 'PASS' : 'FAIL' }}
</div>
Best Practices
- Use
*ngIfand*ngForto conditionally render DOM elements. - Use
[ngClass]or[ngStyle]for dynamic styles. - Create custom directives to keep templates clean and behavior reusable.
- Prefer
Renderer2for DOM manipulation to ensure compatibility.
Conclusion
Directives are essential to building dynamic UIs in Angular. Whether you use built-in options or create custom ones, mastering directives will elevate your frontend development skills and keep your code modular and expressive.
Next Steps
In Chapter 6, we’ll dive into Angular Pipes — a powerful way to transform and format data directly within templates.
