What is the difference between a structural and an attribute directive?

A structural and an attribute directive in Angular differ in what exactly they control in the DOM:

1. Structural directive

• Changes the DOM structure: adds, removes or repeats elements.
• Usually used with *, for example *ngIf, *ngFor, *ngSwitch.
• Example:

2. Attribute directive

• Changes the appearance or behavior of an element, but does not change the DOM structure.
• Applied as an element attribute, for example [ngClass], [ngStyle] or a custom directive like appHighlight.
• Example:

Conclusion: structural directives control the presence and number of elements, attribute directives, the style and behavior of existing elements.