Angular microsyntax gramar

microsyntax.md

Microsyntax

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.

Constraints

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.

Gramar

*: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 ";"?

Traslation

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"

Example

• *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">

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