fix: root cdr now calls the component ref cdr after itself

Author: nartc

apps/demo/src/app/test/scene.component.ts

@@ -1,19 +1,27 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { NgtArgs, NgtBeforeRenderEvent } from 'angular-three';
+import { NgtBeforeRenderEvent } from 'angular-three';
 
 @Component({
     selector: 'demo-test-scene',
     standalone: true,
     template: `
-        <ngt-mesh (beforeRender)="onBeforeRender($any($event))">
-            <ngt-box-geometry *args="[2, 2, 2]" />
-            <ngt-mesh-basic-material color="goldenrod" />
+        <ngt-mesh
+            (click)="active = !active"
+            (pointerover)="hover = true"
+            (pointerout)="hover = false"
+            [scale]="active ? 1.5 : 1"
+            (beforeRender)="onBeforeRender($any($event))"
+        >
+            <ngt-box-geometry />
+            <ngt-mesh-basic-material [color]="hover ? 'goldenrod' : 'darkred'" />
         </ngt-mesh>
     `,
-    imports: [NgtArgs],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class Scene {
+    active = false;
+    hover = false;
+
     onBeforeRender({ object }: NgtBeforeRenderEvent<THREE.Mesh>) {
         object.rotation.x += 0.01;
         object.rotation.y += 0.01;

libs/angular-three/src/lib/canvas.ts

@@ -243,8 +243,10 @@ export class NgtCanvas extends NgtRxStore<NgtCanvasInputs> implements OnInit, On
                 this.envInjector
             );
             this.glRef = this.glAnchor.createComponent(this.scene, { environmentInjector: this.glEnvInjector });
-            this.glRef.changeDetectorRef.detectChanges();
             this.glRef.changeDetectorRef.detach();
+
+            // here, we override the detectChanges to also call detectChanges on the ComponentRef
+            this.overrideDetectChanges();
             this.cdr.detectChanges();
         });
     }
@@ -259,4 +261,12 @@ export class NgtCanvas extends NgtRxStore<NgtCanvasInputs> implements OnInit, On
         injectNgtLoader.destroy();
         super.ngOnDestroy();
     }
+
+    private overrideDetectChanges() {
+        const originalDetectChanges = this.cdr.detectChanges.bind(this.cdr);
+        this.cdr.detectChanges = () => {
+            originalDetectChanges();
+            this.glRef?.changeDetectorRef.detectChanges();
+        };
+    }
 }