Answer: 52 Added defer decorator

apps/angular/52-lazy-load-component/src/app/app.component.ts

@@ -1,26 +1,24 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { PlaceholderComponent } from './placeholder.component';
 import { TopComponent } from './top.component';
 
 @Component({
   selector: 'app-root',
   template: `
     <div class="h-screen bg-gray-500">
-      @if (topLoaded()) {
+      @defer (on interaction(button)) {
         <app-top />
-      } @else {
+      } @placeholder {
         <app-placeholder />
         <button
           class="rounded-sm border border-blue-500 bg-blue-300 p-2"
-          (click)="topLoaded.set(true)">
+          #button>
           Load Top
         </button>
       }
     </div>
   `,
-  changeDetection: ChangeDetectionStrategy.Eager,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [TopComponent, PlaceholderComponent],
 })
-export class AppComponent {
-  topLoaded = signal(false);
-}
+export class AppComponent {}

apps/angular/52-lazy-load-component/src/app/placeholder.component.ts

@@ -5,7 +5,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   template: `
     I'm a placeholder component.
   `,
-  changeDetection: ChangeDetectionStrategy.Eager,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   styles: `
     :host {
       display: grid;

apps/angular/52-lazy-load-component/src/app/top.component.ts

@@ -5,7 +5,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   template: `
     I am a very heavy, expensive component that should be lazy loaded.
   `,
-  changeDetection: ChangeDetectionStrategy.Eager,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   styles: `
     :host {
       display: grid;