Checkbox

<div class="form-check">
  <input id="zgoda" name="zgoda" class="form-check-input" type="checkbox" [(ngModel)]="zgoda">
  <label class="form-check-label" for="zgoda">Akceptuję regulamin</label>
</div>

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

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

<div class="card m-3 p-3" style="width: 26rem">
  <h5>Turniej retro</h5>
  <div class="form-check mb-3">
    <input id="regulamin" name="regulamin" class="form-check-input" type="checkbox"
           [(ngModel)]="regulamin">
    <label class="form-check-label" for="regulamin">Akceptuję regulamin turnieju</label>
  </div>
  <button class="btn btn-success" [disabled]="!regulamin()" (click)="zapisano.set(true)">
    Zapisz się
  </button>
  @if (zapisano()) {
    <p class="text-success mt-3 mb-0">Zapisano! Do zobaczenia w sali 12.</p>
  }
  <p class="small text-secondary mt-3 mb-0">regulamin() = {{ regulamin() }}</p>
</div>

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

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

    readonly cena = computed(() => {
        let suma = this.bazowa;
        if (this.ser()) { suma += 4; }
        if (this.pieczarki()) { suma += 3; }
        if (this.jalapeno()) { suma += 3.5; }
        return suma;
    });
}

<div class="card m-3 p-3" style="width: 24rem">
  <h5>Pizza Margherita — {{ bazowa }} zł</h5>
  <p class="mb-2">Dodatki:</p>

  <div class="form-check">
    <input id="ser" name="ser" class="form-check-input" type="checkbox" [(ngModel)]="ser">
    <label class="form-check-label" for="ser">Podwójny ser (+4 zł)</label>
  </div>
  <div class="form-check">
    <input id="pieczarki" name="pieczarki" class="form-check-input" type="checkbox" [(ngModel)]="pieczarki">
    <label class="form-check-label" for="pieczarki">Pieczarki (+3 zł)</label>
  </div>
  <div class="form-check mb-3">
    <input id="jalapeno" name="jalapeno" class="form-check-input" type="checkbox" [(ngModel)]="jalapeno">
    <label class="form-check-label" for="jalapeno">Jalapeño (+3,50 zł)</label>
  </div>

  <p class="fs-5 fw-bold mb-0">Do zapłaty: {{ cena().toFixed(2) }} zł</p>
</div>

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

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly opcje = ['Gry retro', 'Robotyka', 'Druk 3D', 'Grafika', 'Sieci'];
    readonly wybrane = signal<string[]>([]);

    przelacz(nazwa: string): void {
        this.wybrane.update(lista =>
            lista.includes(nazwa)
                ? lista.filter(x => x !== nazwa)   // był — usuń
                : [...lista, nazwa]                 // nie było — dodaj
        );
    }
}

<div class="p-3" style="width: 26rem">
  <p class="fw-bold">Co cię interesuje?</p>
  @for (o of opcje; track o; let i = $index) {
    <div class="form-check">
      <input [id]="'opcja' + i" class="form-check-input" type="checkbox"
             [checked]="wybrane().includes(o)" (change)="przelacz(o)">
      <label class="form-check-label" [for]="'opcja' + i">{{ o }}</label>
    </div>
  }
  <p class="mt-3">Wybrano ({{ wybrane().length }}): {{ wybrane().join(', ') || 'nic' }}</p>
</div>

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

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly opcje = ['Gry retro', 'Robotyka', 'Druk 3D', 'Grafika', 'Sieci'];
    readonly wybrane = signal<string[]>(['Robotyka']);

    readonly wszystkie = computed(() => this.wybrane().length === this.opcje.length);

    przelacz(nazwa: string): void {
        this.wybrane.update(lista =>
            lista.includes(nazwa) ? lista.filter(x => x !== nazwa) : [...lista, nazwa]
        );
    }

    przelaczWszystkie(): void {
        this.wybrane.set(this.wszystkie() ? [] : [...this.opcje]);
    }
}

<div class="p-3" style="width: 26rem">
  <div class="form-check border-bottom pb-2 mb-2">
    <input id="wszystkie" class="form-check-input" type="checkbox"
           [checked]="wszystkie()" (change)="przelaczWszystkie()">
    <label class="form-check-label fw-bold" for="wszystkie">Zaznacz wszystkie</label>
  </div>
  @for (o of opcje; track o; let i = $index) {
    <div class="form-check">
      <input [id]="'opcja' + i" class="form-check-input" type="checkbox"
             [checked]="wybrane().includes(o)" (change)="przelacz(o)">
      <label class="form-check-label" [for]="'opcja' + i">{{ o }}</label>
    </div>
  }
  <p class="mt-3">Wybrano {{ wybrane().length }} z {{ opcje.length }}.</p>
</div>