gl not available in store when accessed from directive

[IRobot1]

In the following code, gl is undefined. scene is fine. What am I missing?

import { Directive, inject, Input, OnInit, Self } from "@angular/core";

import { NgtCanvas, NgtStore } from "angular-three";

import { VRButton } from "three-stdlib";

import { WebVRService } from "./webvr.service";

@Directive({
  selector: '[webvr]',
  exportAs: 'webVR',
  standalone: true,
})
export class WebVRDirective implements OnInit {
  @Input() referenceSpaceType: XRReferenceSpaceType = 'local-floor';

  readonly store = inject(NgtStore);

  constructor(
    private webvr: WebVRService,
    @Self() private parent: NgtCanvas, // cause runtime failure unless webvr directive on ngt-canvass
  ) { }

  ngOnInit(): void {
    if (!(this.parent instanceof NgtCanvas)) {
      console.warn('Add webvr directive to ngt-canvas');
    }
    const gl = this.store.get('gl');
    const scene = this.store.get('scene');

    console.log(gl, scene);
  }
}

[IRobot1]

The directive is being used like this (which worked with @angular-three)

<ngt-canvas webvr [sceneGraph]="Scene" />

[nartc]

NgtStore#scene is created eagerly whereas the NgtStore#gl is not created until the element is resolved AND the viewport size has been settled. You might want to use the Observable API instead (eg: store.select(“gl”)) or use some timer API (eg: queueMicrotask())

[IRobot1]

Thanks. The following code is now working great

    const scene = this.store.get('scene');

    // wait a couple of frames for GL to be ready
    this.store.select('gl').subscribe(gl => {
      document.body.appendChild(VRButton.createButton(gl));

      this.webvr.start(gl.xr, scene, this.referenceSpaceType);
    });

[IRobot1]

How to do now that its changed to using Signals?