Angular Directives: Structural vs Attribute
Fast recall
Quick revision
Core answer
Whether you can distinguish structural (add/remove elements, the *) from attribute (change existing elements) directives and give an example of each.
Confusing the two: trying to use *ngIf to change styling, or ngClass to add/remove elements.
Structural directives add/remove elements (*ngIf, *ngFor); attribute directives change an existing element's look/behavior (ngClass, custom highlight). The * marks structural.
Interview-ready guide
Interview answer
A directive in Angular is a class that adds behavior to DOM elements, and there are two main kinds.
Structural directives change the DOM layout by adding or removing elements — ngIf conditionally includes an element, ngFor repeats, ngSwitch chooses among options. Attribute directives change the appearance or behavior of an existing element without changing the element count — ngClass toggles classes, ngStyle sets styles, or a custom highlight directive changes the background on hover.
The asterisk prefix marks a structural directive because it's syntactic sugar for an ng-template; attribute directives have no asterisk. The common mistake is confusing the two — using ngIf to change styling when it actually adds or removes elements, or ngClass to add or remove elements when it only changes classes. The test is: does it change the element count?
If yes, it's structural; if it only changes an existing element, it's attribute.
Angular Directives: Structural vs Attribute
Direct Answer
A directive is a class that adds behavior to elements in the DOM. Angular has two main kinds: structural directives add or remove elements (changing the DOM layout) — *ngIf, *ngFor, ngSwitch; attribute directives change the appearance or behavior of an existing element — ngClass, ngStyle, or a custom highlight directive. The asterisk () marks structural directives because they destroy and create elements (behind the scenes they become <ng-template>); attribute directives don't change the element count, they change what an element does or looks like.
Code Example
// STRUCTURAL directives add/remove elements. The * is sugar for <ng-template>.
<div *ngIf="show">Visible only if show is true</div>
<li *ngFor="let item of items">{{item}}</li> // repeats <li> per item
// ATTRIBUTE directives change an existing element (no *).
<p [ngClass]="{ active: isActive, muted: !isActive }">Text</p> // toggles classes
<p [ngStyle]="{ 'color': isError ? 'red' : 'black' }">Text</p> // sets style
// CUSTOM attribute directive: highlight an element on hover.
@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
@HostListener('mouseenter') onMouseEnter() { this.el.nativeElement.style.bg = 'yellow'; }
constructor(private el: ElementRef) {}
}
// Usage: <p appHighlight>Hover me</p>
Common Mistakes & Pitfalls
- Confusing the two: using *ngIf to change styling (it adds/removes elements) or ngClass to add/remove elements.
- Forgetting the * on structural directives (ngIf without * is an error).
- Writing a structural directive when an attribute directive (or just CSS) would do.
Check your understanding
Answer these without looking back at the article.
- What is a directive, and what are the two main kinds?
- What does a structural directive do, and why the * prefix?
- What does an attribute directive do, and what's an example?
- How do you tell structural from attribute at a glance (the *)?
Looking for a structured roadmap?
Every module on this page is also part of the full Java backend interview track.