computed — wartości wyliczane

readonly razem = computed(() => this.cena() * this.ile());
//                         ↑ funkcja bez parametrów, która zwraca wynik — „przepis”

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

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly cena = signal(15);
    readonly ile = signal(1);
    readonly razem = computed(() => this.cena() * this.ile());

    wiecej(): void {
        this.ile.update(n => n + 1);
    }

    mniej(): void {
        this.ile.update(n => (n > 1 ? n - 1 : 1));
    }

    promocja(): void {
        this.cena.set(10);
    }
}

<div class="card m-3 p-3" style="width: 22rem">
  <p>Cena biletu: {{ cena() }} zł</p>
  <div class="d-flex align-items-center gap-2 mb-3">
    <button class="btn btn-outline-secondary" (click)="mniej()">−</button>
    <span class="fs-5">{{ ile() }}</span>
    <button class="btn btn-outline-secondary" (click)="wiecej()">+</button>
  </div>
  <p class="fs-4">Do zapłaty: <strong>{{ razem() }} zł</strong></p>
  <button class="btn btn-warning" (click)="promocja()">Włącz promocję</button>
</div>

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

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly limit = 4;
    readonly osoby = signal<string[]>(['Ala', 'Bartek']);

    readonly ile = computed(() => this.osoby().length);
    readonly wolne = computed(() => this.limit - this.ile());
    readonly pelne = computed(() => this.wolne() === 0);

    zapisz(imie: string): void {
        if (imie.trim() === '' || this.pelne()) {
            return;
        }
        this.osoby.update(lista => [...lista, imie.trim()]);
    }
}

<div class="p-3" style="width: 24rem">
  <div class="input-group mb-3">
    <input #pole class="form-control" placeholder="Imię">
    <button class="btn btn-primary" [disabled]="pelne()"
            (click)="zapisz(pole.value); pole.value = ''">Zapisz</button>
  </div>
  <p>Zapisani: {{ osoby().join(', ') }}</p>
  <p>Osób: {{ ile() }} · wolnych miejsc: {{ wolne() }}</p>
  <p>Wydarzenie pełne: {{ pelne() ? 'tak' : 'nie' }}</p>
</div>

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

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly osoby = signal<string[]>(['Ala']);
    readonly ile = computed(() => this.osoby().length);

    dodajPush(): void {
        this.osoby().push('Gość');
    }

    dodajNowa(): void {
        this.osoby.update(lista => [...lista, 'Gość']);
    }
}

<div class="p-3">
  <button class="btn btn-outline-danger me-2" (click)="dodajPush()">Dodaj przez push</button>
  <button class="btn btn-success" (click)="dodajNowa()">Dodaj przez nową tablicę</button>
  <p class="mt-3">Lista: {{ osoby().join(', ') }}</p>
  <p>Liczba osób (computed): <strong>{{ ile() }}</strong></p>
</div>

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

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

    readonly procent = computed(() => Math.round(this.zapisani() / this.miejsca() * 100));
    readonly komunikat = computed(() =>
        this.procent() >= 90 ? 'Ostatnie miejsca!' : 'Zapraszamy'
    );

    zapisz(): void {
        this.zapisani.update(n => (n < this.miejsca() ? n + 1 : n));
    }

    wiekszaSala(): void {
        this.miejsca.set(60);
    }
}

<div class="card m-3 p-3" style="width: 26rem">
  <p>Zapisani: {{ zapisani() }} z {{ miejsca() }} ({{ procent() }}%)</p>
  <div class="progress mb-3">
    <div class="progress-bar" [style.width.%]="procent()"></div>
  </div>
  <p class="fw-bold">{{ komunikat() }}</p>
  <button class="btn btn-primary mb-2" (click)="zapisz()">Zapisz osobę</button>
  <button class="btn btn-outline-secondary" (click)="wiekszaSala()">Przenieś do większej sali</button>
</div>