output() — dziecko zgłasza zdarzenie

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

@Component({
    selector: 'app-karta',
    imports: [],
    templateUrl: './karta.html'
})
export class Karta {
    readonly tytul = input.required<string>();
    readonly zapisz = output<void>();

    kliknieto(): void {
        this.zapisz.emit();
    }
}

<div class="card p-3 mb-2" style="width: 20rem">
  <h5>{{ tytul() }}</h5>
  <button class="btn btn-sm btn-primary align-self-start" (click)="kliknieto()">Zapisz się</button>
</div>

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

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

    dodajZapis(): void {
        this.zapisow.update(n => n + 1);
    }
}

<div class="p-3">
  <p class="fs-5">Wszystkich zapisów: {{ zapisow() }}</p>
  <app-karta tytul="Turniej retro" (zapisz)="dodajZapis()" />
  <app-karta tytul="Noc robotów" (zapisz)="dodajZapis()" />
</div>

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

@Component({
    selector: 'app-karta',
    imports: [],
    templateUrl: './karta.html'
})
export class Karta {
    readonly tytul = input.required<string>();
    readonly wybrano = output<string>();

    wybierz(): void {
        this.wybrano.emit(this.tytul());
    }
}

<div class="card p-3 mb-2" style="width: 20rem">
  <h5>{{ tytul() }}</h5>
  <button class="btn btn-sm btn-outline-primary align-self-start" (click)="wybierz()">Wybierz</button>
</div>

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

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

<div class="p-3">
  <p class="fs-5">Twój wybór: <strong>{{ wybor() }}</strong></p>
  <app-karta tytul="Turniej retro" (wybrano)="wybor.set($event)" />
  <app-karta tytul="Noc robotów" (wybrano)="wybor.set($event)" />
  <app-karta tytul="Warsztat druku 3D" (wybrano)="wybor.set($event)" />
</div>

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

import { Component, input, output } from '@angular/core';
import { Wydarzenie } from './wydarzenie';

@Component({
    selector: 'app-karta',
    imports: [],
    templateUrl: './karta.html'
})
export class Karta {
    readonly wydarzenie = input.required<Wydarzenie>();
    readonly odwolaj = output<number>();
}

<div class="card p-3 h-100">
  <h5>{{ wydarzenie().tytul }}</h5>
  <p class="mb-2">Sala {{ wydarzenie().sala }}</p>
  <button class="btn btn-sm btn-outline-danger mt-auto"
          (click)="odwolaj.emit(wydarzenie().id)">Odwołaj</button>
</div>

import { Component, signal } from '@angular/core';
import { Karta } from './karta';
import { Wydarzenie } from './wydarzenie';

@Component({
    selector: 'app-demo',
    imports: [Karta],
    templateUrl: './demo.html'
})
export class Demo {
    readonly wydarzenia = signal<Wydarzenie[]>([
        { id: 1, tytul: 'Turniej retro', sala: '12' },
        { id: 2, tytul: 'Noc robotów', sala: '7' },
        { id: 3, tytul: 'Warsztat druku 3D', sala: '14' },
    ]);
    readonly odwolane = signal<string[]>([]);

    usun(id: number): void {
        const w = this.wydarzenia().find(x => x.id === id);
        if (w) {
            this.odwolane.update(l => [...l, w.tytul]);
        }
        this.wydarzenia.update(lista => lista.filter(x => x.id !== id));
    }
}

<div class="p-3">
  <div class="row g-3" style="max-width: 50rem">
    @for (w of wydarzenia(); track w.id) {
      <div class="col-md-4">
        <app-karta [wydarzenie]="w" (odwolaj)="usun($event)" />
      </div>
    } @empty {
      <p class="text-secondary">Wszystkie wydarzenia odwołane.</p>
    }
  </div>
  <p class="mt-3 small">Odwołane: {{ odwolane().join(', ') || 'brak' }}</p>
</div>

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

@Component({
    selector: 'app-formularz',
    imports: [FormsModule],
    templateUrl: './formularz.html'
})
export class Formularz {
    readonly dodano = output<{ tytul: string; sala: string }>();

    readonly tytul = signal('');
    readonly sala = signal('');

    zatwierdz(): void {
        if (this.tytul().trim() === '' || this.sala().trim() === '') {
            return;
        }
        this.dodano.emit({ tytul: this.tytul().trim(), sala: this.sala().trim() });
        this.tytul.set('');
        this.sala.set('');
    }
}

<form class="card p-3" (ngSubmit)="zatwierdz()">
  <h6>Nowe wydarzenie</h6>
  <input name="tytul" class="form-control mb-2" placeholder="Tytuł" [(ngModel)]="tytul">
  <input name="sala" class="form-control mb-2" placeholder="Sala" [(ngModel)]="sala">
  <button class="btn btn-success" type="submit">Dodaj</button>
</form>

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

@Component({
    selector: 'app-demo',
    imports: [Formularz],
    templateUrl: './demo.html'
})
export class Demo {
    nastepneId = 3;
    readonly wydarzenia = signal([
        { id: 1, tytul: 'Turniej retro', sala: '12' },
        { id: 2, tytul: 'Noc robotów', sala: '7' },
    ]);

    dodaj(dane: { tytul: string; sala: string }): void {
        this.wydarzenia.update(lista => [...lista, { id: this.nastepneId, ...dane }]);
        this.nastepneId++;
    }
}

<div class="p-3">
  <div class="row g-4" style="max-width: 50rem">
    <div class="col-md-5">
      <app-formularz (dodano)="dodaj($event)" />
    </div>
    <div class="col-md-7">
      <ul class="list-group">
        @for (w of wydarzenia(); track w.id) {
          <li class="list-group-item">#{{ w.id }} {{ w.tytul }} — sala {{ w.sala }}</li>
        }
      </ul>
    </div>
  </div>
</div>