htlstp.if.scre

# Angular Control Flow

---
#### `@if`
```html
<div class='result container'>
 @if( win() ) {
 You win
 }
 @else if( lose() ) {
 You lose
 }
 @else {
 Draw
 }
</div>
```

---
#### `@for`
```typescript
items = signal([
  {title: 'one', id: 1}, {title: 'two', id: 2}, 
  {title: 'three', id: 3}, {title: 'four', id: 4}
])
```

```angular181html
@for(item of items(); track item.id) {
 {{ item.title }}
}
```

<ul>
 <li class="fragment"><code>track</code> muss ein Ausdruck folgen, welcher für jedes item unique ist</li>
 <li class="fragment"><code>track $index</code> einfach solang keine Neuordnung</li>
</ul>

----
```angular181html
@for(item of items; track $index) {
 {{ $index }}: {{ item }}
}
@empty {
 Please add some items
}
```

```text
$count => items.length
```

```text
$first => $index === 0
```

```text
$last => $index === $count - 1
```

```text
$even => $index % 2 === 0
```

```text
$odd => !$even
```

---
#### `@switch`
```angular181html
@switch (state()) {
 @case ('login') {
 <app-login></app-login>
 }
 @case ('shop') {
 <app-shop></app-shop>
 }
 @case ('admin') {
 @if (isAdmin(user)) { 
 <app-admin></app-admin> 
 }
 }
 @default {
 <app-not-found></app-not-found>
 }
}
```