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: `
-
-
+ @for (card of cardsArr; track card.title) {
+
+ {{ card.title }}
+ @if (card.message) {
+ {{ card.message }}
+ } @else {
+ Aucun message
+ }
+
+ }
`,
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: `
-
{{ title() }}
- @if (message()) {
- {{ message() }}
- } @else {
- Aucun message
- }
+
`,
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
class: 'p-4 border border-grey rounded-sm flex flex-col w-[200px]',
},
})
-export class CardComponent {
- title = input.required();
- message = input(undefined);
-}
+export class CardComponent {}