Directives are classes that add behavior to elements in Angular templates. There are three types:
- Components are directives with their own template.
- Structural directives change the DOM layout by adding or removing elements.
- Attribute directives change the appearance or behavior of an element.
<!-- Structural Directives -->
<div *ngIf="condition">Content</div>
<li *ngFor="let item of items">{{item}}</li>
<!-- Attribute Directives -->
<div [ngClass]="cssClass">Content</div>
<div [ngStyle]="styleObject">Content</div>
NgIf and NgFor are deprecated since Angular 20, because the built-in @if and @for blocks now do their job. They still show how a structural directive works. For styling, the style guide prefers plain class and style bindings over ngClass and ngStyle.
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓
Tailored explanation · switch back to · ·
What should the new diagram focus on?