Angular Control Flow

---

@if

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

---

@for

items = signal([
  {title: 'one', id: 1}, {title: 'two', id: 2}, 
  {title: 'three', id: 3}, {title: 'four', id: 4}
])

@for(item of items(); track item.id) {
  <p>{{ item.title }}</p>
}

• track muss ein Ausdruck folgen, welcher für jedes item unique ist
• track $index einfach solang keine Neuordnung

---

@for(item of items; track $index) {
    {{ $index }}: {{ item }}
}
@empty {
    <p>Please add some items</p>
}

$count => items.length

$first => $index === 0

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

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

$odd   => !$even

---

@switch

@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>
  }
}