From c1788aaee259d9ded5f19713c5b65446c170f919 Mon Sep 17 00:00:00 2001
From: Hung Pham <truonghungit@gmail.com>
Date: Fri, 17 Apr 2026 05:39:19 +0700
Subject: [PATCH] feat(challenge 57): implement content projection in card
 components

---
 .../src/app/app.component.ts                  | 13 ++++++---
 .../src/app/card.component.ts                 | 29 ++++++++++++-------
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/apps/angular/57-content-projection-default/src/app/app.component.ts b/apps/angular/57-content-projection-default/src/app/app.component.ts
index b3e370a34..d38654be3 100644
--- a/apps/angular/57-content-projection-default/src/app/app.component.ts
+++ b/apps/angular/57-content-projection-default/src/app/app.component.ts
@@ -1,12 +1,17 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CardComponent } from './card.component';
+import { CardComponent, CardTitleComponent } from './card.component';
 
 @Component({
-  imports: [CardComponent],
+  imports: [CardComponent, CardTitleComponent],
   selector: 'app-root',
   template: `
-    <app-card title="Titre 1" message="Message1" />
-    <app-card title="Titre 2" />
+    <app-card message="Message1">
+      <app-card-title>Titre 1</app-card-title>
+      <div>Message1</div>
+    </app-card>
+    <app-card>
+      <app-card-title>Titre 2</app-card-title>
+    </app-card>
   `,
   host: {
     class: 'p-4 block flex flex-col gap-1',
diff --git a/apps/angular/57-content-projection-default/src/app/card.component.ts b/apps/angular/57-content-projection-default/src/app/card.component.ts
index 851a6619d..46a2f9e10 100644
--- a/apps/angular/57-content-projection-default/src/app/card.component.ts
+++ b/apps/angular/57-content-projection-default/src/app/card.component.ts
@@ -1,22 +1,29 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-card-title',
+  template: `
+    <ng-content></ng-content>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CardTitleComponent {}
 
 @Component({
   selector: 'app-card',
   imports: [],
   template: `
-    <div>{{ title() }}</div>
-    @if (message()) {
-      <div>{{ message() }}</div>
-    } @else {
-      <div>Aucun message</div>
-    }
+    <div>
+      <ng-content select="app-card-title"></ng-content>
+    </div>
+
+    <div>
+      <ng-content>Aucun message</ng-content>
+    </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'p-4 border border-grey rounded-sm flex flex-col w-[200px]',
   },
 })
-export class CardComponent {
-  title = input.required<string>();
-  message = input<string | undefined>(undefined);
-}
+export class CardComponent {}