From 29cea87b16170013ddf184cf039559d4e634137b Mon Sep 17 00:00:00 2001
From: Hung Pham <truonghungit@gmail.com>
Date: Fri, 17 Apr 2026 06:38:34 +0700
Subject: [PATCH] feat(challenge 58): implement content projection for title
 and message with condition

---
 .../src/app/card.component.ts                     | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/angular/58-content-projection-condition/src/app/card.component.ts b/apps/angular/58-content-projection-condition/src/app/card.component.ts
index 46925977c..f2fd5bb6d 100644
--- a/apps/angular/58-content-projection-condition/src/app/card.component.ts
+++ b/apps/angular/58-content-projection-condition/src/app/card.component.ts
@@ -1,17 +1,26 @@
+import { NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 @Component({
   selector: 'app-card',
+  imports: [NgTemplateOutlet],
   template: `
-    @if (small()) {
+    <ng-template #titleTemplate>
       <ng-content select="[title]" />
+    </ng-template>
+    <ng-template #messageTemplate>
       <ng-content select="[message]" />
+    </ng-template>
+
+    @if (small()) {
+      <ng-container *ngTemplateOutlet="titleTemplate"></ng-container>
+      <ng-container *ngTemplateOutlet="messageTemplate"></ng-container>
     } @else {
       <div class="p-4">
         <div class="text-2xl">
-          <ng-content select="[title]" />
+          <ng-container *ngTemplateOutlet="titleTemplate"></ng-container>
         </div>
-        <ng-content select="[message]" />
+        <ng-container *ngTemplateOutlet="messageTemplate"></ng-container>
       </div>
     }
   `,