Answer: 52

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

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

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

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

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

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

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

@@ -1,6 +1,4 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch((err) => console.error(err));
+bootstrapApplication(AppComponent).catch((err) => console.error(err));