Difference Between Structural and Attribute Directives
💡 Concept Name
Structural vs Attribute Directives – Two primary types of Angular directives that change the layout or appearance of elements.
📘 Quick Intro
Angular provides directives to modify the DOM. Structural directives change the structure of the DOM (add/remove elements), while attribute directives change the appearance or behavior of existing elements.
🧠 Analogy / Short Story
Imagine building a Lego house: structural directives are like deciding which bricks to use or remove (affecting structure), while attribute directives are like painting or decorating the house (changing appearance without affecting structure).
🔧 Technical Explanation
- 🏗️ Structural Directives: Modify the DOM layout by adding or removing elements. Examples:
*ngIf,*ngFor,*ngSwitch. - 🎨 Attribute Directives: Change the appearance or behavior of an element. Examples:
ngClass,ngStyle, custom directives likeappHighlight. - ⚠️ Structural directives are prefixed with
*, while attribute directives are not.
🎯 Purpose & Use Case
- ✅ Use structural directives for conditional rendering, loops, or switching views.
- ✅ Use attribute directives to apply styles, CSS classes, or behaviors dynamically.
💻 Real Code Example
<!-- Structural Directive -->
<div *ngIf="isLoggedIn">Welcome, user!</div>
<!-- Attribute Directive -->
<div [ngStyle]="{color: 'blue'}">This text is blue.</div>
Key Highlight: *ngIf adds/removes the element; ngStyle applies a style without changing structure.
❓ Interview Q&A
Q1: What is a structural directive?
A: It changes the DOM structure by adding or removing elements.
Q2: What is an attribute directive?
A: It changes the appearance or behavior of an element without altering the DOM structure.
Q3: Name three structural directives in Angular.
A: *ngIf, *ngFor, *ngSwitch.
Q4: Name some attribute directives in Angular.
A: ngClass, ngStyle, custom directives like appHighlight.
Q5: Why is there an asterisk (*) before structural directives?
A: It tells Angular to transform the HTML using TemplateRef behind the scenes.
📝 MCQs
Q1. Which directive modifies the structure of the DOM?
- [ngClass]
- *ngIf
- (click)
- [ngStyle]
Q2. Which directive changes only the appearance or behavior?
- *ngFor
- [ngStyle]
- *ngIf
- *ngSwitch
Q3. What does the asterisk (*) signify in a directive like *ngIf?
- Attribute directive
- Style binding
- Structural directive
- Event binding
Q4. Which directive is used to add CSS classes dynamically?
- *ngIf
- [ngClass]
- [style]
- *ngSwitch
Q5. Can attribute directives remove DOM elements?
- Yes
- No
- Sometimes
- Only with * prefix
💡 Bonus Insight
You can create your own custom structural or attribute directives in Angular using the @Directive decorator and by injecting ElementRef and Renderer2 for manipulation.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!