From f2835a81956f3df5c80c91aa8cfd27c40335cab5 Mon Sep 17 00:00:00 2001
From: Dmytro Tarasenko <lordtda@Dmytros-MacBook-Pro.local>
Date: Fri, 15 May 2026 18:16:28 -0400
Subject: [PATCH] feat: moved from inputs to ng-content

---
 .../src/app/app.component.ts                  | 19 ++++++++++++++++---
 .../src/app/card.component.ts                 | 14 +++-----------
 2 files changed, 19 insertions(+), 14 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..1750455db 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
@@ -5,12 +5,25 @@ import { CardComponent } from './card.component';
   imports: [CardComponent],
   selector: 'app-root',
   template: `
-    <app-card title="Titre 1" message="Message1" />
-    <app-card title="Titre 2" />
+    @for (card of cardsArr; track card.title) {
+      <app-card>
+        <div>{{ card.title }}</div>
+        @if (card.message) {
+          <div>{{ card.message }}</div>
+        } @else {
+          <div>Aucun message</div>
+        }
+      </app-card>
+    }
   `,
   host: {
     class: 'p-4 block flex flex-col gap-1',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent {}
+export class AppComponent {
+  cardsArr: { title: string; message?: string }[] = [
+    { title: 'Titre 1', message: 'Message1' },
+    { title: 'Titre 2' },
+  ];
+}
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..c15ec36b4 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,14 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-card',
   imports: [],
   template: `
-    <div>{{ title() }}</div>
-    @if (message()) {
-      <div>{{ message() }}</div>
-    } @else {
-      <div>Aucun message</div>
-    }
+    <ng-content></ng-content>
   `,
   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 {}