Answer:58

apps/angular/57-content-projection-default/src/app/app.component.ts

@@ -1,16 +1,30 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  signal,
+} from '@angular/core';
 import { CardComponent } from './card.component';
 
 @Component({
   imports: [CardComponent],
   selector: 'app-root',
   template: `
-    <app-card title="Titre 1" message="Message1" />
-    <app-card title="Titre 2" />
+    <app-card>
+      <card-title>{{ title1() }}</card-title>
+      <card-message>Message1</card-message>
+    </app-card>
+    <app-card>
+      <card-title>{{ title2() }}</card-title>
+    </app-card>
   `,
   host: {
     class: 'p-4 block flex flex-col gap-1',
   },
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent {}
+export class AppComponent {
+  title1 = signal('Titre 1');
+  title2 = signal('Titre 2');
+}

apps/angular/57-content-projection-default/src/app/card.component.ts

@@ -1,22 +1,16 @@
-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 {
+    <ng-content select="card-title"></ng-content>
+    <ng-content select="card-message">
       <div>Aucun message</div>
-    }
+    </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 {}

apps/angular/58-content-projection-condition/src/app/app.component.ts

@@ -1,17 +1,21 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CardComponent } from './card.component';
+import {
+  CardComponent,
+  CardMessageDirective,
+  CardTitleDirective,
+} from './card.component';
 
 @Component({
-  imports: [CardComponent],
+  imports: [CardComponent, CardTitleDirective, CardMessageDirective],
   selector: 'app-root',
   template: `
     <app-card>
-      <div title>Card 1</div>
-      <div message>Message 1</div>
+      <ng-template appCardTitle><div>Card 1</div></ng-template>
+      <ng-template appCardMessage><div>Message 1</div></ng-template>
     </app-card>
     <app-card [small]="true">
-      <div title>Card 2</div>
-      <div message>Message 2</div>
+      <ng-template appCardTitle><div>Card 2</div></ng-template>
+      <ng-template appCardMessage><div>Message 2</div></ng-template>
     </app-card>
   `,
   host: {

apps/angular/58-content-projection-condition/src/app/card.component.ts

@@ -1,25 +1,50 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  contentChild,
+  Directive,
+  input,
+  TemplateRef,
+} from '@angular/core';
+
+@Directive({
+  selector: '[appCardTitle]',
+})
+export class CardTitleDirective {}
+
+@Directive({
+  selector: '[appCardMessage]',
+})
+export class CardMessageDirective {}
 
 @Component({
   selector: 'app-card',
   template: `
     @if (small()) {
-      <ng-content select="[title]" />
-      <ng-content select="[message]" />
+      <ng-container [ngTemplateOutlet]="cardTitle()" />
+      <ng-container [ngTemplateOutlet]="cardMessage()" />
     } @else {
       <div class="p-4">
         <div class="text-2xl">
-          <ng-content select="[title]" />
+          <ng-container [ngTemplateOutlet]="cardTitle()" />
         </div>
-        <ng-content select="[message]" />
+        <ng-container [ngTemplateOutlet]="cardMessage()" />
       </div>
     }
   `,
+  imports: [NgTemplateOutlet],
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'p-4 border border-grey rounded-sm flex flex-col w-[200px]',
   },
 })
 export class CardComponent {
   small = input<boolean>(false);
+  cardTitle = contentChild.required(CardTitleDirective, {
+    read: TemplateRef,
+  });
+  cardMessage = contentChild.required(CardMessageDirective, {
+    read: TemplateRef,
+  });
 }