What is a structural directive?

AngularJunior~1 min read

A structural directive in Angular is a directive that changes the DOM structure by adding, removing or repeating elements.

Details:

Usually applied with an asterisk (*) in the template, for example *ngIf or *ngFor.
Controls the presence or number of elements in the DOM, not just their styles or behavior.
Used for conditional rendering, loops or template switching.

Examples:

html

<p *ngIf="isVisible">This text is shown only if isVisible = true</p>

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

Conclusion: structural directives control the HTML structure itself, deciding which elements should be added to or removed from the DOM.

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.