Skip to content

Instantly share code, notes, and snippets.

Last active November 21, 2022 09:53
Show Gist options
  • Save mhevery/d3530294cff2e4a1b3fe15ff75d08855 to your computer and use it in GitHub Desktop.
Save mhevery/d3530294cff2e4a1b3fe15ff75d08855 to your computer and use it in GitHub Desktop.
Angular microsyntax gramar


Microsyntax in Angular allows you to write <div *ngFor="let item of items">{{item}}</div> instead of <ng-template ngFor [ngForOf]="items"><div>{{item}}</div></ng-template.


The microsyntax must:

  • be know ahead of time so that IDEs can parse it without knowing what is the underlying semantics of the directive or what directives are present.
  • must translate to key-value attributes in the DOM.


*:prefix="( :let | :expression ) (';' | ',')? ( :let | :as | :keyExp )*"

  • :prefix: HTML attribute key.
  • :key: HTML attribute key.
  • :local: local variable name used in the template.
  • :export: value exported by the directive under a given name.
  • :experession: standard angular expression
  • :keyExp = :key ":"? :expression ("as" :local)? ";"?
  • :let = "let" :local "=" :export ";"?
  • :as = :export "as" :local ";"?


A microsyntax is translated to the normal binding syntax as follows:

  • :prefix and naked :expression translate to [prefix]="expression"
  • :keyExp - [prefixKey]="expression" (let-prefixKey="export") Notice that the prefix is added to the key
  • :let - let-local="export"
  • :as - let-local="export"


  • *ngFor="let item of [1,2,3]"
    • <ng-template ngFor let-item [ngForOf]="[1,2,3]">
  • *ngFor="let item of [1,2,3] as items; trackBy: myTrack; index as i"
    • <ng-template ngFor let-item [ngForOf]="[1,2,3]" let-items="ngForOf" [ngForTrackBy]="myTrack" let-i="index">
  • *ngIf="exp"
    • <ng-template [ngIf]="exp">
  • *ngIf="exp as value"
    • <ng-template [ngIf]="exp" let-value="ngIf">
Copy link

crutchcorn commented Jun 9, 2019

@ja02 Microsyntax is not a simple part of Angular. I've been coding professionally in Angular full-time for the past ~2.5 years and still couldn't tell you what the full microsyntax is (which is why I'm here while I'm working on a huge blogpost about this + other template stuff).

Suffice it to say that if you're unfamiliar with front-end frameworks (or even are just learning Angular), you can likely handwave a lot of the microsyntax for now, follow the API docs for ngIf and ngFor for how and when to use stuff like let index = index and you'd be okay. Otherwise, you might end up more frustrated than not for a bit

Copy link

Hey @crutchcorn, could you share link to the post you are working on when ready.

Copy link

@ssuperczynski absolutely! I'll have it out sometime in the next week or so.

Copy link

Actually, I realize now that this isn't quite right either:
*:prefix="( :let | :expression ) (';' | ',')? ( :let | :as | :keyExp )*"

As it misses the ability to do expression then as for the first item:

*:prefix="( :let | (:expression ("as" :local)?) ) (';' | ',')? ( :let | :as | :keyExp )*"

Would fix that

Copy link

mhevery commented Jul 11, 2019

Copy link

I turned this gist into a fairly comprehensive blog post that explains templates in depth, the micro-syntax (including charts for these "regex"s) and even some insight into ngIf and ngFor source (including writing our own rudimentary versions of each)

The charts that I converted from this gist are here:


Copy link

please edit
<ng-template ngFor [ngForOf]="items"><div>{{item}}</div></ng-template
<ng-template ngFor let-item [ngForOf]="items"><div>{{item}}</div></ng-template>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment