Structural vs attribute directives in Angular - Trade-offs & Expert Analysis

Overview - Structural vs attribute directives

What is it?

In Angular, directives are special instructions that change how the page looks or behaves. Structural directives change the structure of the page by adding or removing elements. Attribute directives change the appearance or behavior of existing elements without changing the page structure.

Why it matters

Without understanding these two types of directives, developers might struggle to control what shows on the page or how elements behave. This can lead to messy code and poor user experiences. Knowing the difference helps build dynamic, interactive web apps that respond to user actions smoothly.

Where it fits

Before learning this, you should know basic Angular components and templates. After this, you can learn about creating custom directives and advanced Angular features like pipes and services.

Mental Model

Core Idea

Structural directives change the page layout by adding or removing elements, while attribute directives change how elements look or behave without changing the layout.

Think of it like...

Think of a room: structural directives are like moving or removing furniture to change the room's shape, while attribute directives are like painting the walls or changing the lighting to change the room's feel without moving anything.

Page Structure
┌─────────────────────────────┐
│                             │
│  Structural Directives       │
│  (Add/Remove Elements)       │
│       │                     │
│       ▼                     │
│  Attribute Directives        │
│  (Change Appearance/Behavior)│
│                             │
└─────────────────────────────┘

Build-Up - 6 Steps

1

Foundation

What are Angular directives?

Concept: Directives are instructions in Angular templates that change how elements behave or appear.

Angular uses directives to add special behavior to elements. They look like HTML attributes but tell Angular to do something extra, like show or hide content or change styles.

Result

You understand that directives are special markers in Angular templates that control element behavior.

Understanding directives is key because they let you control the page dynamically without writing complex JavaScript.

2

Foundation

Difference between structural and attribute directives

Concept: Structural directives change the page layout by adding or removing elements; attribute directives change element appearance or behavior without changing layout.

Structural directives use a * prefix (like *ngIf) and can add or remove elements from the page. Attribute directives change styles or behavior, like changing color or size, without adding or removing elements.

Result

You can tell when a directive changes the page structure or just changes how something looks or acts.

Knowing this difference helps you decide which directive to use for your goal: changing layout or changing style/behavior.

3

Intermediate

Common structural directives in Angular

🤔Before reading on: do you think *ngIf removes elements from the DOM or just hides them visually? Commit to your answer.

Concept: Structural directives like *ngIf and *ngFor control which elements exist in the page's HTML structure.

*ngIf adds or removes elements based on a condition. *ngFor repeats elements for each item in a list. These directives change the actual HTML elements present in the page.

Result

*ngIf removes elements from the DOM when false, not just hiding them. *ngFor creates multiple elements based on data.

Understanding that structural directives add or remove elements helps you manage page performance and behavior correctly.

4

Intermediate

Common attribute directives in Angular

🤔Before reading on: do you think attribute directives can add or remove elements? Commit to your answer.

Concept: Attribute directives change how elements look or behave without changing the page structure.

Examples include ngClass (adds CSS classes), ngStyle (changes styles), and built-in directives like disabled or readonly. They modify element properties or styles but do not add or remove elements.

Result

Attribute directives only change appearance or behavior, never the element count or structure.

Knowing attribute directives only modify existing elements prevents confusion about when elements appear or disappear.

5

Advanced

How Angular processes structural directives

🤔Before reading on: do you think Angular creates a template behind the scenes for structural directives? Commit to your answer.

Concept: Structural directives work by wrapping the element in an Angular template and controlling when it renders.

When you use *ngIf, Angular replaces it with an that contains the element. Angular then adds or removes this template's content from the DOM based on the condition.

Result

Structural directives control rendering by managing templates, not just toggling visibility.

Understanding this template mechanism explains why structural directives can add or remove elements cleanly and efficiently.

6

Expert

Creating custom structural and attribute directives

🤔Before reading on: do you think custom structural directives must use in their code? Commit to your answer.

Concept: You can build your own structural or attribute directives by controlling templates or element properties.

Custom structural directives use the TemplateRef and ViewContainerRef to add or remove templates. Attribute directives inject ElementRef and Renderer2 to change element styles or behavior safely.

Result

You can create powerful reusable directives that change page structure or appearance as needed.

Knowing how to build custom directives unlocks advanced Angular capabilities and lets you tailor behavior beyond built-in options.

Under the Hood

Structural directives work by Angular converting the element with the directive into an behind the scenes. Angular then uses the TemplateRef to create or destroy views inside the ViewContainerRef based on conditions. Attribute directives get direct access to the element and modify its properties or styles using Renderer2 to keep DOM manipulation safe and consistent.

Why designed this way?

Angular separates structural and attribute directives to keep concerns clear: structural directives manage what elements exist, while attribute directives manage how elements look or behave. This separation simplifies the framework's internal rendering logic and helps developers reason about their templates.

Angular Template Processing
┌───────────────────────────────┐
│ Template with *ngIf           │
│ <div *ngIf="condition">      │
│   Content                     │
│ </div>                       │
└─────────────┬─────────────────┘
              │
              ▼
┌───────────────────────────────┐
│ Angular converts to:           │
│ <ng-template [ngIf]>           │
│   <div>Content</div>           │
│ </ng-template>                │
└─────────────┬─────────────────┘
              │
              ▼
┌───────────────────────────────┐
│ ViewContainerRef controls      │
│ when to insert or remove       │
│ the <div> element in DOM       │
└───────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does *ngIf just hide elements with CSS or remove them from the DOM? Commit to your answer.

Common Belief: *ngIf only hides elements visually but keeps them in the DOM.

Reality: *ngIf completely removes or adds elements in the DOM based on the condition.

Why it matters: If you think elements remain in the DOM, you might expect event handlers or bindings to still work, causing bugs or performance issues.

Quick: Can attribute directives add or remove elements from the page? Commit to your answer.

Common Belief: Attribute directives can add or remove elements just like structural directives.

Reality: Attribute directives only change existing elements' appearance or behavior; they cannot add or remove elements.

Why it matters: Confusing this leads to wrong directive choices and unexpected page behavior.

Quick: Do custom structural directives need to manually handle templates? Commit to your answer.

Common Belief: Custom structural directives can just change element styles without templates.

Reality: Custom structural directives must use TemplateRef and ViewContainerRef to control element rendering via templates.

Why it matters: Missing this causes custom directives to fail or behave unpredictably.

Quick: Are all directives in Angular structural? Commit to your answer.

Common Belief: All Angular directives change the page structure.

Reality: Only structural directives change structure; attribute directives only modify existing elements.

Why it matters: This misconception causes confusion about directive roles and template design.

Expert Zone

1

Structural directives always work with internally, but this is hidden from the developer for simplicity.

2

Attribute directives should use Renderer2 for DOM changes to ensure compatibility with server-side rendering and web workers.

3

Stacking multiple structural directives on the same element is not allowed; Angular requires one structural directive per element.

When NOT to use

Avoid using structural directives when you only need to change styles or behavior; use attribute directives instead. For complex conditional rendering, consider Angular's component-level control or routing instead of many nested structural directives.

Production Patterns

In real apps, *ngIf is used to conditionally show forms or messages, *ngFor to list items dynamically, and attribute directives like ngClass to toggle styles based on user interaction. Custom directives often encapsulate reusable UI behavior like tooltips or validation.

Connections

React conditional rendering

Both Angular structural directives and React conditional rendering control what elements appear on the page.

Understanding Angular's structural directives helps grasp how React uses JavaScript expressions to add or remove elements dynamically.

CSS pseudo-classes

Attribute directives often change element styles similar to how CSS pseudo-classes like :hover or :focus change appearance based on state.

Knowing attribute directives complements CSS knowledge by showing how JavaScript-driven style changes work alongside CSS.

Database query filters

Structural directives filter which elements appear, like database queries filter which records are returned.

This connection shows how filtering concepts apply across UI and data layers, helping understand conditional rendering as a form of filtering.

Common Pitfalls

#1 Using *ngIf to hide elements but expecting them to remain in the DOM.

Wrong approach:

Hidden content

Correct approach:

Use *ngIf="false" knowing the element is removed from DOM; use [hidden]="true" to hide but keep element.

Root cause:

Confusing *ngIf with CSS hiding leads to wrong assumptions about element presence.

#2 Trying to apply two structural directives on the same element.

Wrong approach:

Content

Correct approach:

Content

Root cause:

Angular only allows one structural directive per element; misunderstanding this causes template errors.

#3 Manipulating DOM directly in attribute directives without Renderer2.

Wrong approach:

constructor(private el: ElementRef) { this.el.nativeElement.style.color = 'red'; }

Correct approach:

constructor(private el: ElementRef, private renderer: Renderer2) { this.renderer.setStyle(this.el.nativeElement, 'color', 'red'); }

Root cause:

Direct DOM manipulation breaks Angular's platform independence and can cause bugs.

Key Takeaways

Angular directives are special instructions that change how elements appear or behave in templates.

Structural directives add or remove elements from the page, changing its structure, while attribute directives only change existing elements' appearance or behavior.

Structural directives work by wrapping elements in templates and controlling their rendering dynamically.

Attribute directives modify element properties safely using Angular's Renderer2 to ensure compatibility.

Understanding these differences helps build clean, efficient, and dynamic Angular applications.