5

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?

Constantin Beer
  • 5,447
  • 6
  • 25
  • 43
  • It is for a else block. You can then write `` that will be used in case `condition` fails. See here: https://stackoverflow.com/q/43006550/6513921 – ruth Apr 03 '20 at 13:52
  • 1
    I know that it is used for an else block. but I want to know why it is needed since it seems to work without the semicolon as well. maybe I wrote my question a bit too vague. I will edit my question. – Constantin Beer Apr 03 '20 at 13:57
  • 1
    Please note that [one of the examples](https://angular.io/api/common/NgIf#shorthand-syntax) in the documentation doesn't have the semicolon. – ConnorsFan Apr 03 '20 at 14:42

2 Answers2

10

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

ruth
  • 29,535
  • 4
  • 30
  • 57
-1

The semicolon is only required if you are using the "else" block. So, <div *ngIf="condition"> (without the semicolon) is the canonical form when not using an 'else', but <div *ngIf="condition;"> (with the semicolon) is also valid, and <div *ngIf="condition; else elseBlock"> is the required form when using 'else'.

There are also couple of other interesting syntax options that I wasn't aware of until I looked carefully at the documentation.

GreyBeardedGeek
  • 29,460
  • 2
  • 47
  • 67