@for, track, @empty — listy z tablic

@for (w of wydarzenia(); track w.id) {
  <p>{{ w.tytul }}</p>        <!-- w = bieżący element; nazwę wybierasz sam -->
} @empty {
  <p>Brak wydarzeń.</p>       <!-- gdy tablica jest pusta -->
}
@END
      </section>

      <section class="sd-section" id="track">
        <span class="sd-badge sd-b-blue">TEORIA</span>
        <h2>track i zmienne pomocnicze</h2>
        <p><strong><code>track</code> jest obowiązkowy.</strong> Mówi Angularowi, po czym rozpoznaje element: „to wciąż ta sama karta, tylko przesunięta”. Dzięki temu po usunięciu jednego elementu Angular nie przerysowuje całej listy. Dla obiektów wybierz pole unikalne — najczęściej <code>id</code>. Dla listy tekstów bez powtórzeń wystarczy sam element: <code>track sala</code>.</p>
<div class="sd-scroll">
<table class="sd-table">
          <tr><th style="width:22%">Zmienna</th><th>Znaczenie</th></tr>
          <tr><td><code>$index</code></td><td>numer elementu od 0</td></tr>
          <tr><td><code>$first</code>, <code>$last</code></td><td>czy to pierwszy / ostatni element (true/false)</td></tr>
          <tr><td><code>$even</code>, <code>$odd</code></td><td>czy numer jest parzysty / nieparzysty</td></tr>
          <tr><td><code>$count</code></td><td>liczba elementów tablicy</td></tr>
          </table>
</div>
        <p>Zmienne działają tylko wewnątrz bloku. Możesz używać ich wprost (<code>{{ $index + 1 }}</code>) albo nadać im własne nazwy: <code>track g.nick; let nr = $index</code> — przydaje się, gdy jedna pętla stoi w drugiej.</p>
@@BOX info | Interfejs — kształt obiektu
<p>Gdy w tablicy są obiekty, opisujemy ich kształt interfejsem (znasz go z TypeScriptu): <code>interface Wydarzenie { id: number; tytul: string; … }</code>. Sygnał zapisujemy wtedy jako <code>signal&lt;Wydarzenie[]&gt;([...])</code> — kompilator wyłapie literówkę w nazwie pola także w szablonie.</p>

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

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly sale = signal(['Sala 12 — informatyczna', 'Sala 7 — robotyka', 'Aula', 'Biblioteka']);
}

<div class="p-3">
  <h5>Gdzie odbywają się zajęcia koła</h5>
  <ul class="list-group" style="width: 22rem">
    @for (sala of sale(); track sala) {
      <li class="list-group-item">{{ sala }}</li>
    }
  </ul>
</div>

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

interface Wydarzenie {
    id: number;
    tytul: string;
    sala: string;
    miejsca: number;
}

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly wydarzenia = signal<Wydarzenie[]>([
        { id: 1, tytul: 'Turniej retro', sala: '12', miejsca: 16 },
        { id: 2, tytul: 'Noc robotów', sala: '7', miejsca: 0 },
        { id: 3, tytul: 'Warsztat druku 3D', sala: '14', miejsca: 3 },
    ]);
}

<div class="p-3">
  <div class="row g-3" style="max-width: 60rem">
    @for (w of wydarzenia(); track w.id) {
      <div class="col-md-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">{{ w.tytul }}</h5>
            <p class="card-text">Sala {{ w.sala }}</p>
            @if (w.miejsca > 0) {
              <span class="badge text-bg-success">Wolnych miejsc: {{ w.miejsca }}</span>
            } @else {
              <span class="badge text-bg-danger">Brak miejsc</span>
            }
          </div>
        </div>
      </div>
    }
  </div>
</div>

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

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly gracze = signal([
        { nick: 'Pixel', punkty: 980 },
        { nick: 'Bajt', punkty: 870 },
        { nick: 'Kursor', punkty: 815 },
        { nick: 'Ping', punkty: 640 },
    ]);
}

<div class="p-3">
  <table class="table" style="width: 28rem">
    <thead>
      <tr><th>Miejsce</th><th>Gracz</th><th>Punkty</th></tr>
    </thead>
    <tbody>
      @for (g of gracze(); track g.nick; let nr = $index, pierwszy = $first, parzysty = $even) {
        <tr [class.table-light]="parzysty">
          <td>{{ nr + 1 }}.</td>
          <td>
            {{ g.nick }}
            @if (pierwszy) { <span class="badge text-bg-warning">zwycięzca</span> }
          </td>
          <td>{{ g.punkty }}</td>
        </tr>
      }
    </tbody>
  </table>
  <p>Graczy w rankingu: {{ gracze().length }}</p>
</div>

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

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly zadania = signal([
        { id: 1, tekst: 'Podłączyć konsole' },
        { id: 2, tekst: 'Wydrukować dyplomy' },
        { id: 3, tekst: 'Kupić napoje' },
    ]);

    usun(id: number): void {
        this.zadania.update(lista => lista.filter(z => z.id !== id));
    }
}

<div class="p-3">
  <h5>Do zrobienia przed turniejem</h5>
  <ul class="list-group" style="width: 26rem">
    @for (z of zadania(); track z.id) {
      <li class="list-group-item d-flex justify-content-between align-items-center">
        {{ z.tekst }}
        <button class="btn btn-sm btn-outline-danger" (click)="usun(z.id)">Usuń</button>
      </li>
    } @empty {
      <li class="list-group-item text-success">Wszystko zrobione! 🎉</li>
    }
  </ul>
</div>