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 theprefix
is added to thekey
: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">
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
thenas
for the first item:*:prefix="( :let | (:expression ("as" :local)?) ) (';' | ',')? ( :let | :as | :keyExp )*"
Would fix that