Semicolon in *ngIf directive with else block - Angular

Question

Recently I used a *ngIf directive with an else block in Angular and was wondering why in the Angular docs the examples use a semicolon (<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>) as this seems to work without the semicolon as well.

Does this have any side effects not to use the semicolon? Or is this just a more cleaner way to code?

Answer 1

Forethought

On retrospect, this is a very interesting question. The actual question is <div *ngIf="condition; else elseBlock"> works as expected. But also does <div *ngIf="condition else elseBlock">, so what gives? What actually is the need for the semi-colon?

Explanation

It turns out the Angular microsyntax specification that defines how *ngIf is expanded to [ngIf] is quite flexible and difficult to grasp initially. The official Angular docs doesn't go in-depth. A good explanation could be found here and here. Gist of the explanation is that the microsyntax definition is of the form

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

It appears the semi-colon is optional. Additionally in our case, the else block is a key expression and it could be seen that the colon is optional which we aren't using at the moment. So theoretically we could also use <div *ngIf="condition else: elseBlock">. As such, the ngFor can also be used without any semi-colon. So the following block will also work

<div *ngFor="let n of arr let i=index let f=first let l=last">
  {{ n }}
</div>

Working example: Stackblitz