Control flow

Angular block syntax in Markdown: @if, @for and @switch.

Angular's block syntax works in Markdown, evaluated by the same interpreter as every other expression.

`@if`

@if (user) {
  Welcome back, {{ user.name }}.
} @else if (invited) {
  Your invitation is waiting.
} @else {
  <app-button (clicked)="signIn()">Sign in</app-button>
}

Nothing pressed yet — the button on Bindings sets this.

`@for`

@for (release of releases; track release.version) {
 
- **{{ release.version }}** — {{ release.notes }}
 
} @empty {
 
No releases yet.
 
}

Inside the body you get the usual context variables:

Variable	Meaning
`$index`	zero-based position
`$count`	length of the collection
`$first`	first row
`$last`	last row
`$even` / `$odd`	parity of `$index`

@for (item of items; track item.id) {
  {{ $index + 1 }}. {{ item.title }}{{ $last ? '' : ',' }}
}

Rows are reused when their track value is unchanged.

`@switch`

@switch (channel) {
  @case ('stable') {
    You are on the **stable** channel.
  }
  @case ('beta') {
    You are on the **beta** channel.
  }
  @default {
    Unknown channel.
  }
}

Two rules worth knowing

Angular's block syntax is as invisible to CommonMark as a component tag is, so Blasdoc recognises it with its own tokenizer. That leaves two rules:

Where blocks may appear

Paragraphs, lists, list items and blockquotes are all transparent to blocks, so a block may wrap Markdown that spans several paragraphs, or sit inside a list item.