feat(challenge 52): lazy-load-component

Author: rubensedev

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

@@ -1,23 +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',
+  imports: [TopComponent, PlaceholderComponent],
+
   template: `
     <div class="h-screen bg-gray-500">
-      @if (topLoaded()) {
+      @defer (on interaction(loadComponent)) {
         <app-top />
-      } @else {
+      } @placeholder {
         <app-placeholder />
         <button
-          class="rounded-sm border border-blue-500 bg-blue-300 p-2"
-          (click)="topLoaded.set(true)">
+          #loadComponent
+          class="rounded-sm border border-blue-500 bg-blue-300 p-2">
           Load Top
         </button>
       }
     </div>
   `,
-  standalone: false,
 })
-export class AppComponent {
-  topLoaded = signal(false);
-}
+export class AppComponent {}

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

@@ -13,6 +13,5 @@ import { Component } from '@angular/core';
       height: 50%;
     }
   `,
-  standalone: false,
 })
 export class PlaceholderComponent {}

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

@@ -13,6 +13,5 @@ import { Component } from '@angular/core';
       height: 50%;
     }
   `,
-  standalone: false,
 })
 export class TopComponent {}

apps/angular/52-lazy-load-component/src/app/top.component.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));