Dyrektywa ng-content

ng-content to dyrektywa Angulara, która umożliwia transkluzję treści, czyli wstrzykiwanie zawartości HTML z zewnątrz komponentu do jego szablonu. Umożliwia to tworzenie bardziej elastycznych i reużywalnych komponentów, które mogą przyjmować niestandardową zawartość zdefiniowaną w miejscu użycia komponentu.

Dlaczego ng-content jest użyteczne?

Dyrektywa ng-content pozwala tworzyć komponenty działające jako „kontenery” lub „skorupy”, które definiują strukturę i styl, ale pozwalają na dynamiczne definiowanie treści wewnętrznej przez użytkownika komponentu. Dzięki temu można łatwiej tworzyć generyczne UI, takie jak karty, modale, layouty, które potrzebują zewnętrznej zawartości.

Przykład komponentu z ng-content

Załóżmy, że chcemy stworzyć komponent CardComponent, który jest komponentem i zawiera ng-content do wstrzykiwania niestandardowej treści.

Definicja Komponentu

// card.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-card',
  standalone: true,
  imports: [],
  templateUrl: './card.component.html',
  styleUrl: './card.component.css'
})
export class CardComponent {

}

Szablon HTML

<!-- card.component.html-->
<div class="card">
  <div class="card-header">
    <ng-content select="[card-header]">
    </ng-content>
  </div>
  <div class="card-body">
    <ng-content select="[card-body]"></ng-content>
  </div>
  <div class="card-footer">
    <ng-content select="[card-footer]"></ng-content>
  </div>
</div>

Stylowanie Komponentu

/* card.component.css */
.card {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
}
.card-header, .card-body, .card-footer {
  margin-bottom: 10px;
}

Użycie Komponentu CardComponent z niestandardową treścią w app.component.html

<!-- app.component.html-->
<app-card>
    <div card-header>
      Nagłówek karty
    </div>
    <div card-body>
      Zawartość karty
    </div>
    <div card-footer>
      Stopka karty
    </div>
  </app-card>

Wyjaśnienie przykładu

• Komponent CardComponent definiuje strukturę podstawową karty, która składa się z nagłówka, ciała i stopki.
• Dyrektywa ng-content z atrybutem select pozwala na wstrzykiwanie zawartości do określonych miejsc w komponencie. Atrybut select używa selektorów CSS do identyfikacji treści przekazanych do komponentu, które powinny być wstrzyknięte w określone miejsca.
• W kodzie HTML, który używa CardComponent, możesz umieścić dowolną zawartość wewnątrz tagów <app-card></app-card>, określając, gdzie ma być wyświetlona przez dodanie odpowiednich atrybutów (card-header, card-body, card-footer).