App Structure

Angular Three makes heavy use of Dependency Injection to pass NgtCanvas store through the component tree.

import { Component } from "@angular/core";
import { injectStore } from "angular-three";

@Component({})
export class MyCmp {
    private store = injectStore();

    constructor() {
        this.store.camera(); // Signal of default Camera
        this.store.scene(); // Signal of the root Scene
    }
}

Root Scene Graph component

To ensure all of your scene graph building blocks have access to the NgtCanvas store, it is recommended to always have a SceneGraph component as the child of the NgtCanvas component.

app.component.ts

import { Component } from "@angular/core";
import { NgtCanvas } from "angular-three/dom";
import { SceneGraph } from "./scene-graph";

@Component({
    selector: "app-root",
    template: `
        <ngt-canvas>
            <app-scene-graph *canvasContent />
        </ngt-canvas>
    `,
    imports: [NgtCanvas, SceneGraph],
})
export class App {}

scene-graph.ts

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { injectStore } from "angular-three";

@Component({
    selector: "app-scene-graph",
    template: `
        <!-- 3D scene graph goes here -->
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class SceneGraph {
    private store = injectStore(); // ✅ can access store here

    constructor() {
        // ✅ can access Angular Three APIs
        injectBeforeRender(() => {})
    }
}

No provider for NGT_STORE

The following template looks like it should work but it does not.

app.component.ts

import { Component, viewChild, ElementRef } from "@angular/core";
import { NgtCanvas } from "angular-three/dom";
import * as THREE from "three";

@Component({
    selector: "app-root",
    template: `
        <ngt-canvas>
            <ng-template canvasContent>
                <ngt-mesh #mesh>
                    <!-- ... -->
                </ngt-mesh>
            </ng-template>
        </ngt-canvas>
    `,
    imports: [NgtCanvas],
})
export class App {
    private meshRef = viewChild.required<ElementRef<THREE.Mesh>>('mesh');

    constructor() {
        // ❌ No provider for NGT_STORE
        injectBeforeRender(() => {
            this.meshRef().nativeElement.rotation.y += 0.01;
        });
    }
}