Asterisk Microsyntax

## What the asterisk is In an Angular template, a **structural directive** is a directive that decides whether, and how many times, a piece of template is rendered. Structural directives work on an `<ng-template>` element: a template definition that Angular parses and compiles but does **not** render by default. Writing the `<ng-template>` by hand every time would be verbose, so Angular offers a shorthand: prefix the directive's attribute selector with an asterisk (`*`). The Angular documentation calls the value syntax after the asterisk **microsyntax**. The key point for an interview is that the asterisk is resolved by the **compiler**, not at runtime. There is no runtime "star" behaviour and no CSS hiding. The compiler rewrites the element into the long form and then compiles that long form like any other template. ## The rewrite, step by step Take `<li class="row" *ngIf="user as u">{{ u.name }}</li>`. The compiler: 1. Creates an `<ng-template>` element in the position of the `<li>`. 2. Moves the directive onto it: the naked expression `user` becomes the property binding `[ngIf]="user"`. 3. Turns the rest of the microsyntax into bindings or template variables: `user as u` declares `let-u="ngIf"`, a template variable read from the `ngIf` property of the template's context object. 4. Leaves the original `<li>`, with `class="row"` and any other attributes, event bindings or property bindings, **inside** the `<ng-template>` as its content. The result is equivalent to writing: ```html <ng-template [ngIf]="user" let-u="ngIf"> <li class="row">{{ u.name }}</li> </ng-template> ``` Only the structural directive and its microsyntax bindings are moved. A common wrong answer is that all attributes move to the template; they do not, and that is why `class="row"` still lands on the rendered `<li>`. ## What happens at runtime Once the template exists, the directive does the actual work: - It injects **`TemplateRef`**, a handle to the content of the `<ng-template>` it sits on. - It injects **`ViewContainerRef`**, a container anchored at the template's position, into which views can be inserted. - To show the content, it calls `viewContainerRef.createEmbeddedView(templateRef, context)`, which instantiates the template as an **embedded view** with a context object whose properties `let-` variables read. - To hide it, it calls `viewContainerRef.clear()`, which destroys the views in the container, or `remove(index)` for one view. - Nothing is rendered for the `<ng-template>` element itself. The container is anchored by a comment node (dev builds label it `container`), and embedded views are inserted next to it. So "hiding" with a structural directive means the element is **not in the DOM at all** and its child components are destroyed, not merely invisible. ## Shorthand versus long form | Aspect | `*` shorthand | Explicit `<ng-template>` | | --- | --- | --- | | Who writes the wrapper | The compiler | You | | Where other attributes go | Stay on the inner element | Wherever you put them | | Directives per element | One starred directive | Nest templates or `<ng-container>` as you like | | Typical use | Applying a structural directive in markup | Templates passed around by reference | The long form and the shorthand compile to the same thing; the shorthand simply saves you from writing the wrapper and the `let-`/`[prefixKey]` attributes by hand. ## Common points interviewers probe - **Timing of evaluation.** Because the content sits in a template, nothing inside it is created until the directive asks for a view. Child components are not constructed, their inputs are not bound and their lifecycle hooks do not run while the condition is false. - **Template variables are scoped.** A variable declared with `let` or `as` exists only inside the generated `<ng-template>`, so it cannot be read by a sibling element outside the starred one. - **Bindings on the inner element still work.** Event bindings such as `(click)` and property bindings such as `[disabled]` stay on the element and are compiled as part of the template's content, so they behave exactly as they would without the asterisk. - **The long form is legal.** Writing the `<ng-template>` by hand is valid and is what you do when you need a template reference, for example an `else` template, instead of the sugar. - **Selectors match the expanded form.** `NgFor`'s selector is `[ngFor][ngForOf]`; the expanded template satisfies it with a plain `ngFor` attribute and a bound `ngForOf` property, which is why the directive still matches. ## Where the asterisk stands in Angular 22 Since Angular v17 the built-in control-flow blocks `@if`, `@for` and `@switch` are the recommended way to write conditions and loops, and `NgIf`, `NgFor` and `NgSwitch` have been **deprecated since v20**. That deprecation covers those three directives, not the asterisk. The shorthand remains the way to apply any structural directive, including ones you write yourself, such as a permission check, and interviewers still use `*ngIf` as the classic example because most existing codebases contain it. When you explain it, say that new conditional code uses `@if`, and that `*` is the sugar every structural directive, built-in or custom, relies on.