Structural vs attribute directives in Angular

Introduction

Directives in Angular help change how the page looks or behaves. Structural directives change the page layout by adding or removing elements. Attribute directives change how elements look or behave without changing the layout.

When you want to show or hide parts of the page based on a condition.

When you want to repeat a block of HTML for each item in a list.

When you want to change the style or behavior of an element dynamically.

When you want to add or remove elements from the page structure.

When you want to change the appearance of a button or input field.

Syntax

Angular

Structural directive syntax:
*directiveName="expression"

Attribute directive syntax:
[directiveName]="expression" or directiveName without brackets

Structural directives use an asterisk (*) before their name.

Attribute directives are used as normal HTML attributes, sometimes with square brackets.

Examples

This structural directive shows or hides the div based on isVisible.

Angular

<div *ngIf="isVisible">Show this if true</div>

This structural directive repeats the li for each item in the items list.

Angular

<li *ngFor="let item of items">{{ item }}</li>

This attribute directive disables the button when isDisabled is true.

Angular

<button [disabled]="isDisabled">Click me</button>

This is a custom attribute directive that changes the style of the paragraph.

Angular

<p appHighlight>Highlighted text</p>

Sample Program

This Angular example shows both structural and attribute directives:

• *ngIf shows or hides the list.
• *ngFor repeats list items.
• appHighlight is a custom attribute directive that changes the background color of each list item and changes color on mouse hover.

Clicking the button toggles the list visibility.

Angular

import { Component, Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
  }

  @HostListener('mouseenter') onMouseEnter() {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'orange');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
  }
}

@Component({
  selector: 'app-root',
  template: `
    <button (click)="toggle()">Toggle List</button>
    <ul *ngIf="showList">
      <li *ngFor="let item of items" appHighlight>{{ item }}</li>
    </ul>
  `
})
export class AppComponent {
  showList = true;
  items = ['Apple', 'Banana', 'Cherry'];

  toggle() {
    this.showList = !this.showList;
  }
}

Important Notes

Structural directives change the HTML layout by adding or removing elements.

Attribute directives change the look or behavior of existing elements.

Use * only with structural directives.

Summary

Structural directives add or remove elements from the page.

Attribute directives change how elements look or behave without changing layout.

Examples: *ngIf and *ngFor are structural; [disabled] and custom directives like appHighlight are attribute directives.

Practice

1. Which of the following best describes a structural directive in Angular?

easy

A. It binds data to an element's property.

B. It changes the style of an element without altering the DOM structure.

C. It changes the layout by adding or removing elements from the DOM.

D. It listens to user events like clicks or key presses.

Solution

1. Step 1: Understand what structural directives do

   Structural directives modify the DOM layout by adding or removing elements dynamically.

2. Step 2: Compare with other directive types

   Attribute directives change appearance or behavior but do not add or remove elements.

3. Final Answer:

   It changes the layout by adding or removing elements from the DOM. -> Option C

4. Quick Check:

   Structural directive = changes DOM structure [OK]

Hint: Structural = add/remove elements; attribute = change style [OK]

Common Mistakes:

• Confusing attribute directives with structural directives
• Thinking attribute directives add or remove elements
• Mixing event listeners with directive types

2. Which of the following is the correct syntax for using the structural directive that repeats elements in Angular?

easy

A. <div *ngFor="let item of items">{{item}}</div>

B. <div [ngFor]="items">{{item}}</div>

C. <div (ngFor)="items">{{item}}</div>

D. <div #ngFor="items">{{item}}</div>

Solution

1. Step 1: Recall the syntax for the structural directive *ngFor

   The correct syntax uses an asterisk (*) before ngFor and a let variable to iterate.

2. Step 2: Check each option's syntax

   Only <div *ngFor="let item of items">{{item}}</div> uses *ngFor="let item of items" which is correct.

3. Final Answer:

   <div *ngFor="let item of items">{{item}}</div> -> Option A

4. Quick Check:

   *ngFor syntax = <div *ngFor="let item of items">{{item}}</div> [OK]

Hint: Structural directives use * before directive name [OK]

Common Mistakes:

• Using square brackets [] instead of * for structural directives
• Using parentheses () which are for events
• Using template reference (#) incorrectly

3. Given the following Angular template code, what will be rendered?

<ul>
  <li *ngIf="showItem">Item 1</li>
  <li>Item 2</li>
</ul>

Assuming showItem is false.

medium

A. No output, error occurs

B. Item 1Item 2

C.

D. Item 2

Solution

1. Step 1: Understand *ngIf behavior with false condition

   *ngIf removes the element from the DOM if the condition is false.

2. Step 2: Apply this to the template

   The first <li> with *ngIf="showItem" will not render because showItem is false. The second <li> renders normally.

3. Final Answer:

   <ul><li>Item 2</li></ul> -> Option D

4. Quick Check:

   *ngIf false removes element [OK]

Hint: *ngIf false means element is removed, not hidden [OK]

Common Mistakes:

• Thinking *ngIf hides element but keeps it in DOM
• Assuming both list items render regardless
• Confusing *ngIf with attribute directives

4. Identify the error in this Angular template snippet:

<button *ngIf="isEnabled" [disabled]="isDisabled">Click Me</button>

Assuming isEnabled and isDisabled are boolean variables.

medium

A. The syntax is correct; no error present.

B. The *ngIf directive must be replaced with [ngIf].

C. The [disabled] attribute should be replaced with *disabled.

D. Using *ngIf and [disabled] together on the same element is invalid.

Solution

1. Step 1: Check compatibility of *ngIf and [disabled]

   *ngIf controls element presence; [disabled] controls attribute binding. Both can coexist.

2. Step 2: Verify syntax correctness

   The syntax uses *ngIf with a boolean and [disabled] with a boolean, which is valid Angular syntax.

3. Final Answer:

   The syntax is correct; no error present. -> Option A

4. Quick Check:

   *ngIf and [disabled] can be used together [OK]

Hint: *ngIf controls element, [disabled] controls attribute independently [OK]

Common Mistakes:

• Thinking *ngIf and attribute bindings cannot be combined
• Confusing *ngIf with [ngIf]
• Replacing attribute bindings with structural directive syntax

5. You want to create a custom directive that highlights text by changing its background color when hovered. Which type of directive should you create and why?

hard

A. Structural directive, because it needs to add or remove elements on hover.

B. Attribute directive, because it changes the element's appearance without altering layout.

C. Structural directive, because it modifies the DOM structure dynamically.

D. Attribute directive, because it listens to user events but does not change styles.

Solution

1. Step 1: Understand the directive's purpose

   The directive changes background color on hover, affecting appearance only.

2. Step 2: Choose directive type based on behavior

   Attribute directives change element style or behavior without adding/removing elements, fitting this case.

3. Final Answer:

   Attribute directive, because it changes the element's appearance without altering layout. -> Option B

4. Quick Check:

   Appearance change = attribute directive [OK]

Hint: Appearance changes use attribute directives, layout changes use structural [OK]

Common Mistakes:

• Choosing structural directive for style changes
• Confusing event listening with directive type
• Thinking attribute directives add/remove elements