What is a Structural Directive in Angular?

1. What is a Structural Directive?

A structural directive is an Angular directive that changes the structure of the DOM by adding, removing, or conditionally rendering elements.

In traditional Angular syntax, common structural directives include:

• *ngIf — conditionally adds/removes an element.
• *ngFor — repeats an element for each item in a collection.
• *ngSwitchCase — conditionally displays elements based on a value.

Example:

<h2 *ngIf="isLoggedIn">
  Welcome User
</h2>

If isLoggedIn is true, the <h2> is created. If it is false, the <h2> is removed from the DOM.

Simple definition: A structural directive changes the DOM structure by adding, removing, or repeating elements.

2. Why Do We Need Structural Directives?

Applications frequently need to control which elements exist on the page.

For example:

Show Login button only when user is logged out
Show Logout button only when user is logged in
Display products from a product list
Show an error message when an error occurs

Structural directives allow Angular to perform these operations based on application data.

3. Full Simple Sample Program

Let's use the traditional *ngIf structural directive.

app.ts

import { Component } from '@angular/core';
import { NgIf } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgIf],
  templateUrl: './app.html'
})
export class App {

  isLoggedIn = true;

}

app.html

<h1>Structural Directive Example</h1>

<h2 *ngIf="isLoggedIn">
  Welcome User
</h2>

<button (click)="isLoggedIn = !isLoggedIn">
  Login / Logout
</button>

4. Program Explanation

The important code is:

<h2 *ngIf="isLoggedIn">
  Welcome User
</h2>

When:

isLoggedIn = true;

Angular creates the element:

<h2>Welcome User</h2>

When:

isLoggedIn = false;

Angular removes that element from the DOM.

So:

isLoggedIn = true
        ↓
*ngIf condition is true
        ↓
<h2> is added to DOM
        ↓
"Welcome User" is displayed

If false:

isLoggedIn = false
        ↓
*ngIf condition is false
        ↓
<h2> is removed from DOM

This is why it is called a structural directive — it changes the structure of the DOM.

5. Another Example — *ngFor

*ngFor repeats an element for every item in a collection.

app.ts

import { Component } from '@angular/core';
import { NgFor } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgFor],
  templateUrl: './app.html'
})
export class App {

  technologies = [
    'Angular',
    'ASP.NET Core',
    'SQL Server'
  ];

}

app.html

<ul>
  <li *ngFor="let technology of technologies">
    {{ technology }}
  </li>
</ul>

Output:

• Angular
• ASP.NET Core
• SQL Server

Angular creates one <li> element for each item.

6. Structural vs Attribute Directive

This is an important interview difference:

For example:

<div *ngIf="isVisible">
  Hello
</div>

*ngIf can add/remove the <div>.

Whereas:

<div [ngClass]="{ active: isActive }">
  Hello
</div>

ngClass keeps the <div> but changes its CSS classes.

Easy way to remember

Structural Directive
        ↓
Changes the element structure
        ↓
Add / Remove / Repeat


Attribute Directive
        ↓
Changes existing element
        ↓
Appearance / Behavior

7. What Does the * Mean?

In traditional structural directives:

<div *ngIf="isVisible">
  Hello
</div>

the * is shorthand syntax.

Angular conceptually transforms it into an <ng-template> form similar to:

<ng-template [ngIf]="isVisible">
  <div>
    Hello
  </div>
</ng-template>

Therefore, structural directives work with templates to determine whether content should be instantiated.

8. Modern Angular: @if and @for

This is very important for modern Angular.

Modern Angular provides built-in control-flow syntax:

@if (isLoggedIn) {
  <h2>Welcome User</h2>
}

Instead of traditional:

<h2 *ngIf="isLoggedIn">
  Welcome User
</h2>

For loops, modern Angular uses:

@for (technology of technologies; track technology) {
  <p>{{ technology }}</p>
}

Instead of:

<p *ngFor="let technology of technologies">
  {{ technology }}
</p>

Before vs Modern Angular

For new Angular applications, prefer the modern built-in control-flow syntax such as @if and @for.

However, *ngIf and *ngFor remain important interview topics because you will see them extensively in existing Angular applications.

9. Advantages

• Makes conditional UI rendering simple.
• Can dynamically add and remove DOM elements.
• Can repeat elements from collections.
• Reduces manual DOM manipulation.
• Keeps UI logic declarative and readable.
• Useful for lists, permissions, loading states, errors, and conditional sections.

10. Disadvantages

Structural directives are useful, but:

• Too many nested conditions can make templates difficult to read.
• Repeated rendering of large collections can affect performance if not handled correctly.
• Removing an element means its component/directive instance and associated state may also be destroyed.

Modern @if and @for syntax generally makes complex templates easier to read.

11. Key Points

• Structural directives change DOM structure.
• They can add, remove, or repeat elements.
• Traditional examples include *ngIf and *ngFor.
• The * syntax is shorthand related to <ng-template>.
• Structural directives differ from attribute directives because attribute directives normally modify an existing element.
• Modern Angular provides @if, @for, and @switch.
• For new Angular code, modern control-flow syntax is generally preferred.

12. Interview Questions and Answers

Q1. What is a structural directive?

A structural directive changes the DOM structure by adding, removing, or repeating elements.

Q2. Give examples of structural directives.

Traditional Angular examples are:

*ngIf
*ngFor
*ngSwitchCase

Modern Angular provides:

@if
@for
@switch

Q3. What is the difference between an attribute directive and structural directive?

An attribute directive changes the appearance or behavior of an existing element, whereas a structural directive changes the DOM structure by adding, removing, or repeating elements.

Q4. What does * mean in *ngIf?

The * represents Angular's shorthand syntax for applying a structural directive through an underlying template mechanism.

Q5. Does *ngIf hide an element using CSS?

No. When the condition is false, *ngIf removes the element from the DOM rather than merely hiding it with CSS.

Q6. What is the modern replacement for *ngIf?

Modern Angular provides:

@if (isLoggedIn) {
  <h2>Welcome User</h2>
}

Q7. What is the modern replacement for *ngFor?

@for (item of items; track item) {
  <p>{{ item }}</p>
}

Q8. What is the best short interview answer?

A structural directive is an Angular directive that changes the DOM structure by adding, removing, or repeating elements. Traditional examples are *ngIf and *ngFor; modern Angular provides control-flow syntax such as @if and @for.