Suggest an editImprove this articleRefine the answer for “What is the difference between a structural and an attribute directive?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)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: ```html <p *ngIf="isVisible">Shown only if isVisible = true</p> ``` 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: ```html <p [ngStyle]="{'color': textColor}">Text with a dynamic color</p> ```Shown above the full answer for quick recall.Answer (EN)ImageA **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: ```html <p *ngIf="isVisible">Shown only if isVisible = true</p> ``` 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: ```html <p [ngStyle]="{'color': textColor}">Text with a dynamic color</p> ``` > Conclusion: structural directives control **the presence and number of elements**, attribute directives, **the style and behavior of existing elements**.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.