Select — lista rozwijana

<select id="klasa" name="klasa" class="form-select" [(ngModel)]="klasa">
  <option value="1TP">1TP</option>
  <option value="2TP">2TP</option>
</select>

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

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

<div class="p-3" style="width: 20rem">
  <label class="form-label" for="klasa">Twoja klasa</label>
  <select id="klasa" name="klasa" class="form-select" [(ngModel)]="klasa">
    <option value="1TP">1TP</option>
    <option value="2TP">2TP</option>
    <option value="3TP">3TP</option>
    <option value="4TP">4TP</option>
  </select>
  <p class="mt-3">Wybrano: <strong>{{ klasa() }}</strong></p>
</div>

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

interface Wydarzenie {
    id: number;
    tytul: string;
    sala: string;
    godzina: string;
}

@Component({
    selector: 'app-demo',
    imports: [FormsModule],
    templateUrl: './demo.html'
})
export class Demo {
    readonly wydarzenia: Wydarzenie[] = [
        { id: 1, tytul: 'Turniej retro', sala: '12', godzina: '16:00' },
        { id: 2, tytul: 'Noc robotów', sala: '7', godzina: '18:30' },
        { id: 3, tytul: 'Warsztat druku 3D', sala: '14', godzina: '15:15' },
    ];
    readonly wybrane = signal<Wydarzenie>(this.wydarzenia[0]);
}

<div class="p-3" style="width: 26rem">
  <label class="form-label" for="wyd">Wydarzenie</label>
  <select id="wyd" name="wyd" class="form-select" [(ngModel)]="wybrane">
    @for (w of wydarzenia; track w.id) {
      <option [ngValue]="w">{{ w.tytul }}</option>
    }
  </select>

  <div class="card mt-3">
    <div class="card-body">
      <h5 class="card-title">{{ wybrane().tytul }}</h5>
      <p class="card-text mb-0">Sala {{ wybrane().sala }}, godz. {{ wybrane().godzina }}</p>
    </div>
  </div>
</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 jezyki = ['C#', 'TypeScript', 'Kotlin', 'Python', 'Java'];
    readonly jezyk = signal<string | null>(null);
}

<div class="p-3" style="width: 24rem">
  <label class="form-label" for="jezyk">Ulubiony język programowania</label>
  <select id="jezyk" name="jezyk" class="form-select" [(ngModel)]="jezyk">
    <option [ngValue]="null" disabled>— wybierz —</option>
    @for (j of jezyki; track j) {
      <option [ngValue]="j">{{ j }}</option>
    }
  </select>

  @if (jezyk() === null) {
    <p class="form-text">Nic jeszcze nie wybrano.</p>
  } @else {
    <p class="mt-3">Świetny wybór: <strong>{{ jezyk() }}</strong>!</p>
    <button class="btn btn-sm btn-outline-secondary" (click)="jezyk.set(null)">Wyczyść wybór</button>
  }
</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 katalog: Record<string, string[]> = {
        'Gry': ['Turniej retro', 'Liga e-sportowa', 'Planszówki'],
        'Technika': ['Noc robotów', 'Warsztat druku 3D', 'Lutowanie dla początkujących'],
        'Sztuka': ['Grafika komputerowa', 'Fotografia'],
    };
    readonly kategorie = Object.keys(this.katalog);

    readonly kategoria = signal<string | null>(null);
    readonly wydarzenie = signal<string | null>(null);

    readonly wydarzenia = computed(() => {
        const k = this.kategoria();
        return k === null ? [] : this.katalog[k];
    });
}

<div class="p-3" style="width: 26rem">
  <label class="form-label" for="kat">Kategoria</label>
  <select id="kat" name="kat" class="form-select mb-3"
          [(ngModel)]="kategoria" (change)="wydarzenie.set(null)">
    <option [ngValue]="null" disabled>— wybierz kategorię —</option>
    @for (k of kategorie; track k) {
      <option [ngValue]="k">{{ k }}</option>
    }
  </select>

  <label class="form-label" for="wyd">Wydarzenie</label>
  <select id="wyd" name="wyd" class="form-select" [(ngModel)]="wydarzenie"
          [disabled]="kategoria() === null">
    <option [ngValue]="null" disabled>— wybierz wydarzenie —</option>
    @for (w of wydarzenia(); track $index) {
      <option [ngValue]="w">{{ w }}</option>
    }
  </select>

  <p class="mt-3">Zapis: {{ kategoria() ?? '?' }} → {{ wydarzenie() ?? '?' }}</p>
</div>