🎨 Angular Content Projection – Flexible UIs mit ng-content, @ContentChild & Co.

Wenn du wiederverwendbare Komponenten in Angular entwickelst, brauchst du Content Projection.
Sie macht deine Komponenten flexibel, komponierbar und clean.

✨ 1. Das Prinzip ng-content

<!-- button.component.html -->
<button class="fancy-button">
  <ng-content></ng-content>
</button>

<!-- usage -->
<app-button>Jetzt starten</app-button>

➡ Der Button wird wiederverwendbar, ohne festes Label

🎯 2. Mehrere Slots mit select

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

<app-card>
  <div card-header>🧠 Header-Content</div>
  <p>Body-Inhalt</p>
</app-card>

➡ Super für strukturierte Layouts

🧠 3. Zugriff via @ContentChild

@ContentChild('titleRef') title!: ElementRef;

ngAfterContentInit() {
  console.log(this.title.nativeElement.textContent);
}

<app-section>
  <h2 #titleRef>Section-Überschrift</h2>
</app-section>

➡ Zugriff auf DOM, Komponenten oder TemplateRefs

💡 Best Practices

• Nutze Content Projection für Layout-Komponenten
• Vermeide Logik in projected Content
• Kombiniere mit Inputs für Flexibilität

✅ Fazit

Mit ng-content und @ContentChild machst du Angular-Komponenten wiederverwendbar & elegant.
Perfekt für UI Libraries, Design Systeme und modulare Apps.

📍 Nächster Beitrag:
📊 Angular Charting – Highcharts vs. ApexCharts vs. ngx-charts