@switch — jedna wartość, wiele możliwości

@switch (status()) {
  @case ('wolne') { <span>…</span> }
  @case ('brak') { <span>…</span> }
  @default { <span>żaden przypadek nie pasuje</span> }
}
@END
<div class="sd-scroll">
<table class="sd-table">
          <tr><th style="width:22%">Część</th><th>Znaczenie</th></tr>
          <tr><td><code>@switch (x)</code></td><td>wartość, którą sprawdzamy — zwykle sygnał albo pole elementu w pętli</td></tr>
          <tr><td><code>@case (y)</code></td><td>fragment, gdy <code>x === y</code>. Wielkość liter ma znaczenie, typ też: <code>'1'</code> to nie <code>1</code></td></tr>
          <tr><td><code>@default</code></td><td>gdy żaden przypadek nie pasuje; nieobowiązkowy, ale łapie literówki w danych</td></tr>
          </table>
</div>
@@BOX info | Bez break
<p>W przeciwieństwie do <code>switch</code> w TypeScripcie nie piszesz tu <code>break</code>. Każdy <code>@case</code> ma własne klamry i Angular nigdy nie „przelatuje” do następnego. Wewnątrz <code>@switch</code> mogą stać <strong>tylko</strong> bloki <code>@case</code> i <code>@default</code>.</p>

import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly status = signal('wolne');

    ustaw(nowy: string): void {
        this.status.set(nowy);
    }
}

<div class="p-3">
  <div class="mb-3">
    <button class="btn btn-sm btn-outline-secondary me-1" (click)="ustaw('wolne')">wolne</button>
    <button class="btn btn-sm btn-outline-secondary me-1" (click)="ustaw('ostatnie')">ostatnie</button>
    <button class="btn btn-sm btn-outline-secondary me-1" (click)="ustaw('brak')">brak</button>
    <button class="btn btn-sm btn-outline-secondary" (click)="ustaw('odwolane')">odwołane</button>
  </div>

  @switch (status()) {
    @case ('wolne') {
      <span class="badge text-bg-success fs-6">Są wolne miejsca</span>
    }
    @case ('ostatnie') {
      <span class="badge text-bg-warning fs-6">Ostatnie miejsca!</span>
    }
    @case ('brak') {
      <span class="badge text-bg-danger fs-6">Brak miejsc</span>
    }
    @case ('odwolane') {
      <span class="badge text-bg-secondary fs-6">Wydarzenie odwołane</span>
    }
  }
</div>

import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly status = signal('wolne');
}

<div class="p-3">
  <input #pole class="form-control mb-2" style="width: 18rem" placeholder="wpisz status">
  <button class="btn btn-primary mb-3" (click)="status.set(pole.value)">Ustaw</button>

  <p>
    @switch (status()) {
      @case ('wolne') { <span class="badge text-bg-success">Są wolne miejsca</span> }
      @case ('brak') { <span class="badge text-bg-danger">Brak miejsc</span> }
      @default { <span class="badge text-bg-dark">Nieznany status: „{{ status() }}”</span> }
    }
  </p>
</div>

import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly wydarzenia = signal([
        { id: 1, tytul: 'Turniej retro', status: 'wolne' },
        { id: 2, tytul: 'Noc robotów', status: 'brak' },
        { id: 3, tytul: 'Warsztat druku 3D', status: 'ostatnie' },
        { id: 4, tytul: 'Hackathon', status: 'odwolane' },
    ]);
}

<div class="p-3">
  <ul class="list-group" style="width: 28rem">
    @for (w of wydarzenia(); track w.id) {
      <li class="list-group-item d-flex justify-content-between">
        {{ w.tytul }}
        @switch (w.status) {
          @case ('wolne') { <span class="badge text-bg-success">wolne</span> }
          @case ('ostatnie') { <span class="badge text-bg-warning">ostatnie</span> }
          @case ('brak') { <span class="badge text-bg-danger">brak</span> }
          @default { <span class="badge text-bg-secondary">odwołane</span> }
        }
      </li>
    }
  </ul>
</div>

import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly zakladka = signal('opis');
}

<div class="p-3" style="width: 32rem">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <button class="nav-link" [class.active]="zakladka() === 'opis'" (click)="zakladka.set('opis')">Opis</button>
    </li>
    <li class="nav-item">
      <button class="nav-link" [class.active]="zakladka() === 'regulamin'" (click)="zakladka.set('regulamin')">Regulamin</button>
    </li>
    <li class="nav-item">
      <button class="nav-link" [class.active]="zakladka() === 'kontakt'" (click)="zakladka.set('kontakt')">Kontakt</button>
    </li>
  </ul>

  <div class="border border-top-0 p-3">
    @switch (zakladka()) {
      @case ('opis') { <p>Turniej gier retro dla uczniów wszystkich klas. Sala 12, piątek, 16:00.</p> }
      @case ('regulamin') { <p>Drużyny dwuosobowe. Gramy na sprzęcie szkolnym. Obowiązuje fair play.</p> }
      @case ('kontakt') { <p>Opiekun koła: sala 12, przerwa po 3. lekcji.</p> }
    }
  </div>
</div>