model() — własna kontrolka z [( )]

<app-licznik [(wartosc)]="bilety" />
<app-licznik [wartosc]="bilety()" (wartoscChange)="bilety.set($event)" />

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

@Component({
    selector: 'app-licznik',
    imports: [],
    templateUrl: './licznik.html'
})
export class Licznik {
    readonly wartosc = model(0);
    readonly min = input(0);
    readonly max = input(10);

    plus(): void {
        this.wartosc.update(n => Math.min(n + 1, this.max()));
    }

    minus(): void {
        this.wartosc.update(n => Math.max(n - 1, this.min()));
    }
}

<div class="input-group" style="width: 9rem">
  <button class="btn btn-outline-secondary" type="button" (click)="minus()">−</button>
  <span class="form-control text-center">{{ wartosc() }}</span>
  <button class="btn btn-outline-secondary" type="button" (click)="plus()">+</button>
</div>

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

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

<div class="card m-3 p-3" style="width: 22rem">
  <p class="mb-2">Liczba biletów (1–6):</p>
  <app-licznik [(wartosc)]="bilety" [min]="1" [max]="6" />
  <p class="fs-5 mt-3 mb-2">Do zapłaty: {{ razem() }} zł</p>
  <button class="btn btn-sm btn-outline-secondary align-self-start" (click)="bilety.set(1)">Wróć do 1</button>
</div>

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

@Component({
    selector: 'app-licznik',
    imports: [],
    templateUrl: './licznik.html'
})
export class Licznik {
    readonly wartosc = model(0);
    readonly min = input(0);
    readonly max = input(10);

    plus(): void {
        this.wartosc.update(n => Math.min(n + 1, this.max()));
    }

    minus(): void {
        this.wartosc.update(n => Math.max(n - 1, this.min()));
    }
}

<div class="input-group" style="width: 10rem">
  <button class="btn btn-outline-secondary" type="button" (click)="minus()">−</button>
  <span class="form-control text-center">{{ wartosc() }}</span>
  <button class="btn btn-outline-secondary" type="button" (click)="plus()">+</button>
</div>

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

@Component({
    selector: 'app-demo',
    imports: [Licznik],
    templateUrl: './demo.html'
})
export class Demo {
    readonly a = signal(3);
    readonly b = signal(3);
    readonly historia = signal<number[]>([]);

    zmienB(nowa: number): void {
        this.b.set(nowa);
        this.historia.update(h => [...h, nowa]);
    }
}

<div class="p-3">
  <p class="mb-1">Skrót <code>[(wartosc)]</code>: {{ a() }}</p>
  <app-licznik [(wartosc)]="a" />

  <p class="mt-4 mb-1">Rozbite <code>[wartosc]</code> + <code>(wartoscChange)</code>: {{ b() }}</p>
  <app-licznik [wartosc]="b()" (wartoscChange)="zmienB($event)" />
  <p class="small text-secondary mt-2">Historia: {{ historia().join(' → ') || '—' }}</p>
</div>

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

@Component({
    selector: 'app-gwiazdki',
    imports: [],
    templateUrl: './gwiazdki.html'
})
export class Gwiazdki {
    readonly ocena = model(0);
    readonly numery = [1, 2, 3, 4, 5];
}

<span class="fs-3" role="radiogroup">
  @for (n of numery; track n) {
    <span role="radio" style="cursor: pointer"
          [attr.aria-checked]="n === ocena()"
          [class.text-warning]="n <= ocena()"
          [class.text-secondary]="n > ocena()"
          (click)="ocena.set(n)">★</span>
  }
</span>

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

@Component({
    selector: 'app-demo',
    imports: [Gwiazdki],
    templateUrl: './demo.html'
})
export class Demo {
    readonly turniej = signal(4);
    readonly roboty = signal(0);
    readonly srednia = computed(() => (this.turniej() + this.roboty()) / 2);

    wyczysc(): void {
        this.turniej.set(0);
        this.roboty.set(0);
    }
}

<div class="p-3">
  <div style="width: 24rem">
    <p class="mb-0">Turniej retro: {{ turniej() }}/5</p>
    <app-gwiazdki [(ocena)]="turniej" />

    <p class="mb-0 mt-2">Noc robotów: {{ roboty() }}/5</p>
    <app-gwiazdki [(ocena)]="roboty" />

    <p class="mt-3 fs-5">Średnia: {{ srednia() }}</p>
    <button class="btn btn-sm btn-outline-secondary" (click)="wyczysc()">Wyczyść oceny</button>
  </div>
</div>

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

@Component({
    selector: 'app-przelacznik',
    imports: [],
    templateUrl: './przelacznik.html'
})
export class Przelacznik {
    readonly wlaczony = model(false);
    readonly etykieta = input.required<string>();
}

<div class="d-flex justify-content-between align-items-center border rounded p-2 mb-2">
  <span>{{ etykieta() }}</span>
  <button type="button" class="btn btn-sm" style="width: 5rem"
          [class.btn-success]="wlaczony()" [class.btn-outline-secondary]="!wlaczony()"
          (click)="wlaczony.set(!wlaczony())">
    {{ wlaczony() ? 'WŁ.' : 'WYŁ.' }}
  </button>
</div>

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

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

    readonly ileWlaczonych = computed(() =>
        [this.powiadomienia(), this.ciemny(), this.dzwiek()].filter(x => x).length
    );
}

<div class="p-3">
  <div class="border rounded p-3" style="width: 22rem" [class.text-bg-dark]="ciemny()">
    <h5>Ustawienia</h5>
    <app-przelacznik etykieta="Powiadomienia" [(wlaczony)]="powiadomienia" />
    <app-przelacznik etykieta="Tryb ciemny" [(wlaczony)]="ciemny" />
    <app-przelacznik etykieta="Dźwięki" [(wlaczony)]="dzwiek" />
    <p class="mb-0 small">Włączonych: {{ ileWlaczonych() }} z 3</p>
  </div>
</div>