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.