Structural Directives
Open almost any Angular project written before 2024 and you will see stars in the templates: *ngIf, *ngFor. Greenhouse will use the newer built-in blocks, but you need to read the older style fluently, and understanding the star explains what every "show this, repeat that" feature really does.
The rule
A star means "this element is a template the directive stamps out".
A structural directive changes the structure of the page: it adds or removes elements rather than changing how one looks.
<p *ngIf="plants.length === 0">No plants yet.</p>
<li *ngFor="let p of plants; let i = index">
{{ i + 1 }}. {{ p.name }}
</li>*ngIf renders the paragraph only while the condition is true. *ngFor renders one <li> per plant. Both come from @angular/common and must be imported (NgIf, NgFor, or the whole CommonModule).
The star is shorthand. Angular rewrites the element into an <ng-template>, a piece of markup that is not shown on its own, and hands it to the directive:
<ng-template [ngIf]="plants.length === 0">
<p>No plants yet.</p>
</ng-template>The directive then decides how many copies to stamp into the page: zero or one for ngIf, one per item for ngFor.
Two rules follow:
- One star per element. Each star wants to wrap the element, and two wrappers on one element are ambiguous. Use
<ng-container>, an invisible grouping tag, to carry the second one. - An
elseneeds a named template:*ngIf="plants.length; else empty"with<ng-template #empty>...</ng-template>.
Modern Angular replaces these with the built-in @if, @for and @switch blocks, which need no imports and read more clearly. The star directives are marked deprecated in recent versions, but they still work, and you will meet them for years.
The shortcut
When you see a star, unfold it: picture the element wrapped in <ng-template>, and the directive deciding how many copies to print. Every puzzle about stars becomes a puzzle about templates.
Spot the star
<li *ngFor="let p of plants">is a template stamped once per plant.
Drills
Answer fast — trust the rule.
What does the star in *ngIf stand for?
How many structural directives may sit on one element?
What does <ng-container> add to the rendered page?
Which statement about *ngIf and @if is true?
Remember
- Structural directives add and remove elements; the star unfolds into an
ng-template. - One star per element; group with
ng-container. - New code uses
@if/@for/@switch, but read*ngIf/*ngForfluently.