Angular why asterisk (*)

Asterisk syntax is a syntatic sugar for more wordy template syntax which directive expands to under the hood, you are free to use any of these options.

Quote from the docs:

The asterisk is “syntactic sugar”. It simplifies ngIf and ngFor for
both the writer and the reader. Under the hood, Angular replaces the
asterisk version with a more verbose form.

The next two ngIf examples are effectively the same and we may write in either style:

<!-- Examples (A) and (B) are the same -->

<!-- (A) *ngIf paragraph -->
<p *ngIf="condition">
  Our heroes are true!

<!-- (B) [ngIf] with template -->
<template [ngIf]="condition">
    Our heroes are true!

Leave a Comment