@if, @else if, @else — fragmenty pod warunkiem

@if (warunek) {
  <p>widać, gdy warunek jest prawdziwy</p>
}

@if (warunek) {
  <p>jeden fragment</p>
} @else {
  <p>drugi fragment</p>
}

@if (a) {
  <p>pierwszy pasujący</p>
} @else if (b) {
  <p>…</p>
} @else {
  <p>gdy żaden nie pasuje</p>
}
@END
        <p>Warunek stoi <strong>w nawiasach okrągłych</strong> i jest dowolnym wyrażeniem: <code>zapisany()</code>, <code>wolne() &gt; 0</code>, <code>imie() !== ''</code>. W łańcuchu Angular sprawdza warunki od góry i pokazuje <strong>pierwszy</strong> pasujący fragment — reszty już nie sprawdza.</p>
<div class="sd-scroll">
<table class="sd-table">
          <tr><th style="width:24%">Operator</th><th style="width:30%">Znaczenie</th><th>Przykład</th></tr>
          <tr><td><code>&amp;&amp;</code></td><td>i — oba warunki prawdziwe</td><td><code>wolne() &gt; 0 &amp;&amp; wolne() &lt;= 3</code></td></tr>
          <tr><td><code>||</code></td><td>lub — wystarczy jeden</td><td><code>status() === 'brak' || odwolane()</code></td></tr>
          <tr><td><code>!</code></td><td>zaprzeczenie</td><td><code>!wyslano()</code></td></tr>
          </table>
</div>
@@BOX info | @if czy [hidden]?
<p><code>[hidden]</code> z lekcji 06 tylko <strong>ukrywa</strong> element — dalej jest w kodzie strony. <code>@if</code> go <strong>usuwa</strong> i tworzy od nowa, gdy warunek znów będzie prawdziwy. Dlatego pole tekstowe w bloku <code>@if</code> po ponownym pojawieniu się jest puste. W tym kursie do pokazywania i ukrywania używamy <code>@if</code>.</p>

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

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

    przelacz(): void {
        this.zapisany.update(z => !z);
    }
}

<div class="p-3">
  <button class="btn btn-primary" (click)="przelacz()">Zapisz / wypisz</button>

  @if (zapisany()) {
    <div class="alert alert-success mt-3" style="width: 24rem">
      Dziękujemy! Jesteś na liście uczestników.
    </div>
  }
</div>

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

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

    zapisz(): void {
        this.wolne.update(n => n - 1);
    }
}

<div class="card m-3 p-3" style="width: 22rem">
  <h5>Turniej retro</h5>
  <p>Wolnych miejsc: {{ wolne() }}</p>

  @if (wolne() > 0) {
    <button class="btn btn-success" (click)="zapisz()">Zapisz się</button>
  } @else {
    <span class="badge text-bg-secondary fs-6">Brak miejsc</span>
  }
</div>

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

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

    zmien(o: number): void {
        this.punkty.update(p => Math.min(100, Math.max(0, p + o)));
    }
}

<div class="p-3">
  <p class="fs-4">Punkty: {{ punkty() }} / 100</p>
  <button class="btn btn-outline-secondary me-2" (click)="zmien(-10)">−10</button>
  <button class="btn btn-outline-secondary" (click)="zmien(10)">+10</button>

  <p class="mt-3 fs-5">
    @if (punkty() >= 90) {
      <span class="text-success">Ocena: celujący</span>
    } @else if (punkty() >= 75) {
      <span class="text-success">Ocena: bardzo dobry</span>
    } @else if (punkty() >= 50) {
      <span class="text-primary">Ocena: dostateczny lub dobry</span>
    } @else if (punkty() >= 30) {
      <span class="text-warning">Ocena: dopuszczający</span>
    } @else {
      <span class="text-danger">Ocena: niedostateczny</span>
    }
  </p>
</div>

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

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

    wyslij(tekst: string): void {
        this.imie.set(tekst.trim());
        this.wyslano.set(true);
    }

    jeszczeRaz(): void {
        this.imie.set('');
        this.wyslano.set(false);
    }
}

<div class="card m-3 p-3" style="width: 24rem">
  @if (!wyslano()) {
    <label class="form-label">Imię uczestnika</label>
    <input #pole class="form-control mb-2">
    <button class="btn btn-primary" (click)="wyslij(pole.value)">Wyślij</button>
  } @else if (wyslano() && imie() !== '') {
    <p class="text-success">Zapisano: <strong>{{ imie() }}</strong></p>
    <button class="btn btn-outline-secondary" (click)="jeszczeRaz()">Zapisz kolejną osobę</button>
  } @else {
    <p class="text-danger">Nie podano imienia.</p>
    <button class="btn btn-outline-secondary" (click)="jeszczeRaz()">Spróbuj jeszcze raz</button>
  }
</div>