ng-content — komponent z miejscem na treść

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

@Component({
    selector: 'app-ramka',
    imports: [],
    template: `
      <div class="border border-2 rounded-3 shadow-sm p-3 mb-3">
        <ng-content />
      </div>
    `
})
export class Ramka {}

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

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

    polub(): void {
        this.polubienia.update(n => n + 1);
    }
}

<div class="p-3">
  <div style="max-width: 30rem">
    <app-ramka>
      <h5>Zwykły tekst</h5>
      <p class="mb-0">Turniej retro odbędzie się w piątek w sali 12.</p>
    </app-ramka>

    <app-ramka>
      <img src="/img/turniej.svg" alt="Plakat turnieju" class="img-fluid rounded">
    </app-ramka>

    <app-ramka>
      <button class="btn btn-outline-danger" (click)="polub()">♥ Lubię to</button>
      <span class="ms-2">{{ polubienia() }}</span>
    </app-ramka>
  </div>
</div>

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

@Component({
    selector: 'app-karta',
    imports: [],
    template: `
      <div class="card mb-3">
        <div class="card-header fw-bold"><ng-content select="[naglowek]" /></div>
        <div class="card-body"><ng-content /></div>
        <div class="card-footer text-secondary small"><ng-content select="[stopka]" /></div>
      </div>
    `
})
export class Karta {}

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

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

<div class="p-3">
  <div style="max-width: 30rem">
    <app-karta>
      <span naglowek>Noc robotów</span>
      <p>Budujemy i programujemy roboty do wyścigu po linii.</p>
      <p class="mb-0">Zabierz laptopa i ładowarkę.</p>
      <span stopka>sobota, sala 7</span>
    </app-karta>

    <app-karta>
      <span stopka>stopka wpisana jako pierwsza</span>
      <span naglowek>Kolejność nie ma znaczenia</span>
      <ul class="mb-0"><li>nagłówek trafia na górę</li><li>stopka na dół</li></ul>
    </app-karta>
  </div>
</div>

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

@Component({
    selector: 'app-panel',
    imports: [],
    template: `
      <div class="border rounded mb-2">
        <button type="button" class="btn w-100 text-start d-flex justify-content-between"
                (click)="otwarty.set(!otwarty())">
          <strong>{{ tytul() }}</strong>
          <span>{{ otwarty() ? '−' : '+' }}</span>
        </button>
        @if (otwarty()) {
          <div class="px-3 pb-3"><ng-content /></div>
        }
      </div>
    `
})
export class Panel {
    readonly tytul = input.required<string>();
    readonly otwarty = model(false);
}

import { Component } from '@angular/core';
import { Panel } from './panel';

@Component({
    selector: 'app-demo',
    imports: [Panel],
    templateUrl: './demo.html'
})
export class Demo {}

<div class="p-3">
  <div style="max-width: 32rem">
    <h5>Najczęstsze pytania</h5>
    <app-panel tytul="Kto może przyjść na turniej?" [otwarty]="true">
      Każdy uczeń ZSMI. Uczniowie spoza szkoły — za zgodą opiekuna koła.
    </app-panel>
    <app-panel tytul="Czy trzeba mieć własny sprzęt?">
      Nie. Gramy na szkolnych komputerach, ale <strong>własny pad</strong> jest mile widziany.
    </app-panel>
    <app-panel tytul="Gdzie zapisać drużynę?">
      <ol class="mb-0"><li>Wypełnij formularz na stronie klubu.</li><li>Potwierdź zapis u opiekuna.</li></ol>
    </app-panel>
  </div>
</div>

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

@Component({
    selector: 'app-okno',
    imports: [],
    template: `
      <div class="position-fixed top-0 start-0 w-100 h-100 bg-dark bg-opacity-50
                  d-flex align-items-center justify-content-center" (click)="zamknij.emit()">
        <div class="bg-white rounded shadow p-3" style="width: 26rem" (click)="$event.stopPropagation()">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="mb-0">{{ tytul() }}</h5>
            <button type="button" class="btn-close" aria-label="Zamknij" (click)="zamknij.emit()"></button>
          </div>
          <ng-content />
        </div>
      </div>
    `
})
export class Okno {
    readonly tytul = input.required<string>();
    readonly zamknij = output<void>();
}

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

@Component({
    selector: 'app-demo',
    imports: [Okno, FormsModule],
    templateUrl: './demo.html'
})
export class Demo {
    readonly otwarte = signal(false);
    readonly nick = signal('');
    readonly zapisani = signal<string[]>([]);

    zapisz(): void {
        if (this.nick().trim() === '') {
            return;
        }
        this.zapisani.update(l => [...l, this.nick().trim()]);
        this.nick.set('');
        this.otwarte.set(false);
    }
}

<div class="p-3">
  <div style="max-width: 30rem">
    <button class="btn btn-primary" (click)="otwarte.set(true)">Zapisz się na turniej</button>
    <p class="mt-3">Zapisani: {{ zapisani().join(', ') || 'nikt' }}</p>
  </div>

  @if (otwarte()) {
    <app-okno tytul="Zapis na turniej retro" (zamknij)="otwarte.set(false)">
      <form (ngSubmit)="zapisz()">
        <input name="nick" class="form-control mb-3" placeholder="Twój nick" [(ngModel)]="nick">
        <div class="text-end">
          <button type="button" class="btn btn-outline-secondary me-2" (click)="otwarte.set(false)">Anuluj</button>
          <button type="submit" class="btn btn-primary">Zapisz</button>
        </div>
      </form>
    </app-okno>
  }
</div>