Directivesintermediate
Legacy Structural Directives: *ngIf and *ngFor
Explain how the asterisk structural directive syntax desugars into ng-template, since interviewers still expect familiarity with legacy codebases.
Even though @if/@for are now preferred, the overwhelming majority of production Angular code written before 2023 uses *ngIf and *ngFor, and interviewers routinely ask candidates to explain what the asterisk actually does under the hood — because that explanation reveals whether you understand structural directives generally, not just these two specific ones.
The asterisk is shorthand the way a recipe's '1 tsp' is shorthand for 'one teaspoon' — a compact notation that expands into the fuller, more verbose form (ng-template) that's doing the actual work underneath.
Key Concepts
1
The asterisk is syntactic sugar: *ngIf="condition" desugars to <ng-template [ngIf]="condition"><!-- content --></ng-template>. The structural directive (NgIf) is applied to the ng-template, and its job is to decide whether to instantiate that template's content into the DOM at all. This is why structural directives can only be one per element (you can't stack two asterisks on the same tag) — there's only one ng-template to attach to.
*ngIf="condition"<ng-template [ngIf]="condition"><!-- content --></ng-template>NgIfng-template
2
*ngFor follows the same desugaring but with more microsyntax: *ngFor="let item of items; trackBy: trackFn; let i = index" becomes an ng-template with ngForOf, ngForTrackBy, and template context variables bound through Angular's structural directive microsyntax parser, which is itself a small grammar most developers never need to write by hand but should be able to read.
*ngFor*ngFor="let item of items; trackBy: trackFn; let i = index"ng-templatengForOfngForTrackBy
3
Interviewers sometimes ask you to explain why *ngIf requires NgIf/CommonModule in a standalone component's imports while @if requires nothing — the answer ties back to this desugaring: *ngIf is a real, importable Angular directive class, whereas @if is compiler syntax with no corresponding directive to import.
*ngIfNgIfCommonModuleimports@if