Output for <ngt-canvas />

[dolanmiu]

I am creating a component in a library which uses angular-three

Somewhere in the Scene Graph, it emits output. I want this to be bubbled up out of the component, into the host app.

I added an output on my SceneGraph, but I can't see it in <ngt-canvas />

export class SceneGraph {
  protected readonly Math = Math;
  pointsOfInterest = output<Vector3>();
}

@Component({
  selector: 'lib-three-d-hero',
  standalone: true,
  imports: [NgtCanvas],
  template: ` <ngt-canvas [sceneGraph]="sceneGraph" (pointsOfInterest)="pointsOfInterest.emit($event)" /> `,
  styles: `
    :host {
      display: block;
      height: 100dvh;
    }
  `,
})

How can I make this work?

[ldu0009]

The standard Angular component hierarchy differs in this case, as the SceneGraph is not part of Angular’s standard DOM tree or component tree. As a result, it’s not possible to propagate @Output events directly to the parent component (e.g., <ngt-canvas>).

If you need to pass data or events, the recommended approach would be to use a service to handle the communication.

[nartc]

Hi @dolanmiu, @ldu0009 is correct in this case.

That said, I'm happy to push a patch version to expose the ComponentRef for SceneGraph that is created.

[nartc]

3.7.0 now adds a (rendered) output on <ngt-canvas />. This output emits the ComponentRef that is created by rendering the [sceneGraph]

@Component({
  template: `
    <ngt-canvas [sceneGraph]="sceneGraph" (rendered)="onRendered($event)" />
  `
})
export class MyCmp {
  sceneGraph = SceneGraph;

  onRendered(ev: ComponentRef<SceneGraph>) {
    // now you can do anything with the ComponentRef
    // ev.setInput()
    // ev.instance.someOutput.subscribe()
  }
}

[ldu0009]

@nartc Wow! This opens up endless possibilities. I’m so excited to see what we can do with it!