Liczby: number i range

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

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

    readonly a = signal<number | null>(2);
    readonly b = signal<number | null>(3);

    dodajRef(x: string, y: string): void {
        this.wynikRef.set(x + y + ' (typ: ' + typeof x + ')');
    }
}

<div class="p-3">
  <div class="row g-4" style="max-width: 50rem">
    <div class="col-md-6">
      <h6>Zmienne szablonowe</h6>
      <input #x type="number" class="form-control mb-2" value="2">
      <input #y type="number" class="form-control mb-2" value="3">
      <button class="btn btn-outline-danger" (click)="dodajRef(x.value, y.value)">Dodaj</button>
      <p class="mt-2">Wynik: {{ wynikRef() }}</p>
    </div>
    <div class="col-md-6">
      <h6><code>ngModel</code></h6>
      <input name="a" type="number" class="form-control mb-2" [(ngModel)]="a">
      <input name="b" type="number" class="form-control mb-2" [(ngModel)]="b">
      <p class="mt-2">Wynik: {{ (a() ?? 0) + (b() ?? 0) }} (typ: {{ typeof a() }})</p>
    </div>
  </div>
</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 cena = 15;
    readonly bilety = signal<number | null>(1);

    readonly poprawne = computed(() => {
        const n = this.bilety();
        return n !== null && Number.isInteger(n) && n >= 1 && n <= 10;
    });

    readonly razem = computed(() => (this.poprawne() ? this.bilety()! * this.cena : 0));
}

<div class="p-3" style="width: 22rem">
  <label class="form-label" for="bilety">Liczba biletów (1–10)</label>
  <input id="bilety" name="bilety" type="number" class="form-control"
         min="1" max="10" step="1" [(ngModel)]="bilety">

  @if (poprawne()) {
    <p class="mt-3 fs-5">Do zapłaty: {{ razem() }} zł</p>
  } @else {
    <p class="mt-3 text-danger">Podaj liczbę całkowitą od 1 do 10.</p>
  }
</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 rozmiar = signal(32);
    readonly widocznosc = signal(100);
}

<div class="p-3" style="width: 28rem">
  <label class="form-label" for="rozmiar">Rozmiar: {{ rozmiar() }} px</label>
  <input id="rozmiar" name="rozmiar" type="range" class="form-range"
         min="12" max="72" step="2" [(ngModel)]="rozmiar">

  <label class="form-label" for="widocznosc">Widoczność: {{ widocznosc() }}%</label>
  <input id="widocznosc" name="widocznosc" type="range" class="form-range"
         min="0" max="100" step="5" [(ngModel)]="widocznosc">

  <div class="border p-3 mt-3 text-center">
    <span class="fw-bold"
          [style.font-size.px]="rozmiar()"
          [style.opacity]="widocznosc() / 100">NOC ROBOTÓW</span>
  </div>
</div>

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

@Component({
    selector: 'app-demo',
    imports: [FormsModule, DecimalPipe],
    templateUrl: './demo.html'
})
export class Demo {
    readonly cenaZaDzien = 120;
    readonly osoby = signal<number | null>(20);
    readonly dni = signal(3);
    readonly doplata = signal<number | null>(0);

    readonly naOsobe = computed(() => this.dni() * this.cenaZaDzien + (this.doplata() ?? 0));
    readonly razem = computed(() => this.naOsobe() * (this.osoby() ?? 0));
}

<div class="card m-3 p-3" style="width: 28rem">
  <label class="form-label" for="osoby">Liczba uczestników</label>
  <input id="osoby" name="osoby" type="number" class="form-control mb-3"
         min="1" max="40" [(ngModel)]="osoby">

  <label class="form-label" for="dni">Liczba dni: {{ dni() }}</label>
  <input id="dni" name="dni" type="range" class="form-range mb-3"
         min="1" max="7" [(ngModel)]="dni">

  <label class="form-label" for="doplata">Dopłata za osobę (zł)</label>
  <input id="doplata" name="doplata" type="number" class="form-control mb-3"
         min="0" step="0.01" [(ngModel)]="doplata">

  <p class="mb-1">Na osobę: {{ naOsobe() | number:'1.2-2' }} zł</p>
  <p class="fs-5 fw-bold">Razem: {{ razem() | number:'1.2-2' }} zł</p>
</div>