Structural vs attribute directives in Angular - Visual Side-by-Side Comparison

Concept Flow - Structural vs attribute directives

Angular Template

↓

Directive Detected?

↓

Structural?

↓

Change DOM

↓

Render Updated DOM

Angular checks each directive in the template. Structural directives change the DOM layout by adding/removing elements. Attribute directives change element appearance or behavior without changing DOM structure.

Execution Sample

Angular

  <div *ngIf="show">Hello</div>
  <button [disabled]="isDisabled">Click</button>

Shows how a structural directive (*ngIf) adds/removes a div, and an attribute directive ([disabled]) changes a button's attribute.

Execution Table

Step	Directive Type	Condition/Binding	Action	DOM Change	Rendered Output
1	Structural (*ngIf)	show = true	Add <div>Hello</div>	DOM adds div element	<div>Hello</div> rendered
2	Attribute ([disabled])	isDisabled = false	Set disabled attribute to false	No DOM structure change	<button enabled>Click</button> rendered
3	Structural (*ngIf)	show = false	Remove <div>	DOM removes div element	No div rendered
4	Attribute ([disabled])	isDisabled = true	Set disabled attribute to true	No DOM structure change	<button disabled>Click</button> rendered
5	End	-	-	-	Rendering complete

💡 All directives processed, DOM updated accordingly

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
show	true	true	true	false	false	false
isDisabled	false	false	false	false	true	true

Key Moments - 2 Insights

Why does *ngIf remove or add elements instead of just changing attributes?

Because *ngIf is a structural directive that changes the DOM layout by adding or removing elements, as shown in execution_table steps 1 and 3.

Can attribute directives like [disabled] change the DOM structure?

No, attribute directives only change element properties or styles without adding or removing elements, as seen in steps 2 and 4.

Visual Quiz - 3 Questions

Look at the execution table, what happens to the DOM at step 3?

A The button becomes enabled

B A new div element is added

C A div element is removed from the DOM

D The button becomes disabled

💡 Hint

Check the 'DOM Change' column for step 3 in the execution_table

At which step does the button become disabled according to the execution table?

A Step 4

B Step 2

C Step 1

D Step 3

💡 Hint

Look at the 'Action' and 'Rendered Output' columns for the button in execution_table

If 'show' was always true, how would the execution table change?

A Step 1 would not add the div element

B Step 3 would not remove the div element

C Step 4 would disable the button

D Step 2 would disable the button

💡 Hint

Refer to the 'Condition/Binding' and 'Action' columns for the structural directive steps

Concept Snapshot

Structural directives start with * and change the DOM structure by adding or removing elements.
Attribute directives change element appearance or behavior without changing DOM structure.
Example: *ngIf adds/removes elements; [disabled] changes button state.
Structural directives affect layout; attribute directives affect styling or properties.
Use structural for layout changes, attribute for element modifications.

Full Transcript

In Angular, directives come in two main types: structural and attribute. Structural directives, like *ngIf, change the page layout by adding or removing elements from the DOM. Attribute directives, like [disabled], change how an element looks or behaves without changing the DOM structure. For example, when 'show' is true, *ngIf adds a div with 'Hello'. When 'show' is false, it removes that div. The button's disabled state changes based on the 'isDisabled' variable but the button element stays in the DOM. This visual trace shows how Angular processes these directives step-by-step, updating the DOM or element attributes accordingly.