What does the asterisk (*) before a directive do?

AngularJunior~1 min read

The asterisk * before a directive in Angular denotes a structural directive and is syntactic sugar for creating an <ng-template> around the element.

How it works:

Angular interprets *directive as an <ng-template> wrapper and inserts the element inside it.
This lets the directive control the DOM structure: adding, removing or repeating elements.

Example:

html

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

Equivalent without the asterisk:

html

<ng-template [ngIf]="isVisible">
  <p>The text is shown only if isVisible = true</p>
</ng-template>

Conclusion: * simplifies the syntax of structural directives and automatically creates an <ng-template> to control the DOM.

Short Answer

Interview ready

Premium

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