From 2030c8de57cb9755f00b25bb196be4e3272b256c Mon Sep 17 00:00:00 2001
From: jpaberzs <janis.paberzs18@gmail.com>
Date: Wed, 2 Sep 2026 17:13:45 +0300
Subject: [PATCH] feat: added defer decorator

---
 .../src/app/app.component.ts                       | 14 ++++++--------
 .../src/app/placeholder.component.ts               |  2 +-
 .../src/app/top.component.ts                       |  2 +-
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/apps/angular/52-lazy-load-component/src/app/app.component.ts b/apps/angular/52-lazy-load-component/src/app/app.component.ts
index 32eee073d..062baf3d2 100644
--- a/apps/angular/52-lazy-load-component/src/app/app.component.ts
+++ b/apps/angular/52-lazy-load-component/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { PlaceholderComponent } from './placeholder.component';
 import { TopComponent } from './top.component';
 
@@ -6,21 +6,19 @@ import { TopComponent } from './top.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 {}
diff --git a/apps/angular/52-lazy-load-component/src/app/placeholder.component.ts b/apps/angular/52-lazy-load-component/src/app/placeholder.component.ts
index df5a6e4e7..a4d1d830f 100644
--- a/apps/angular/52-lazy-load-component/src/app/placeholder.component.ts
+++ b/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;
diff --git a/apps/angular/52-lazy-load-component/src/app/top.component.ts b/apps/angular/52-lazy-load-component/src/app/top.component.ts
index 196c4463c..9c4ad9714 100644
--- a/apps/angular/52-lazy-load-component/src/app/top.component.ts
+++ b/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;