What is a Directive in Angular?
💡 Concept Name
Directive — Angular’s way of extending HTML with custom behavior or structure.
📘 Quick Intro
A directive in Angular is a class that lets you attach behavior to elements in the DOM. Angular has three types: Component, Structural (like *ngIf, *ngFor), and Attribute directives (like ngClass, ngStyle).
🧠 Analogy / Short Story
Think of directives as decorators you put on a wall. Some change the structure (knock out a wall — *ngIf), others just add paint or wallpaper (ngStyle/ngClass).
🔧 Technical Explanation
- 🏗️ Structural directives alter DOM layout (e.g., *ngFor, *ngIf).
- 🎨 Attribute directives change appearance/behavior (e.g., ngClass, ngStyle).
- ⚙️ You can create custom directives using the `@Directive` decorator.
- 🔁 Directives are reusable and declarative.
- 🧱 Components are also directives with a template.
🎯 Purpose & Use Case
- ✅ Show/hide content conditionally with *ngIf.
- ✅ Loop over arrays with *ngFor.
- ✅ Dynamically style DOM using ngStyle/ngClass.
- ✅ Encapsulate logic into reusable custom directives.
- ✅ Simplify markup and enforce DRY principles.
💻 Real Code Example
// custom-highlight.directive.ts
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}Usage:
<p appHighlight>This text is highlighted!</p>
❓ Interview Q&A
Q1: What is a directive in Angular?
A: A directive is a class that modifies the DOM behavior or structure.
Q2: Types of Angular directives?
A: Component, Structural, and Attribute directives.
Q3: Give examples of structural directives.
A: *ngIf, *ngFor, *ngSwitch.
Q4: Give examples of attribute directives.
A: ngClass, ngStyle, custom directive like appHighlight.
Q5: Can I create my own directive?
A: Yes, using the `@Directive` decorator.
Q6: Are components considered directives?
A: Yes, components are directives with templates.
Q7: Can directives be reused?
A: Absolutely. They promote DRY code.
Q8: What's the difference between *ngIf and ngIf?
A: *ngIf is a structural directive with syntactic sugar.
Q9: How do directives differ from components?
A: Components have templates; directives do not.
Q10: Do directives improve maintainability?
A: Yes, especially with custom logic encapsulation.
📝 MCQs
Q1. Which decorator is used to define a directive in Angular?
- @Component
- @Injectable
- @Directive
- @Pipe
Q2. Which of the following is a structural directive?
- ngClass
- ngModel
- *ngIf
- ngStyle
Q3. What is the main role of attribute directives?
- Routing
- Template rendering
- Change appearance or behavior
- Provide services
Q4. Which directive is used for conditionally including a template?
- *ngSwitch
- *ngFor
- *ngIf
- ngStyle
Q5. What is true about directives?
- They define modules
- They route pages
- They add behavior to DOM elements
- They handle HTTP calls
💡 Bonus Insight
When creating reusable logic like input validation or dynamic styling, attribute directives are powerful. Pair them with dependency injection and Angular’s Renderer2 for safer DOM manipulation.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!