How can i use components inside the layer to have more split up code?

[wwqbus]

i was trying to have some ko-group components so that i can easier make templates for icons i need to make (over 20 types)

so i have my main component stage:

<section>
<ko-stage #stage [config]="stageConfig" (click)="handleStageClick($event.event)">
  <ko-layer #layer >
   <onoff></onoff>
  </ko-layer>
</ko-stage>
</section>

the seperate component class:

import { Component, input, signal, ViewChild } from "@angular/core";
import { GroupConfig } from "konva/lib/Group";
import { CoreShapeComponent } from "ng2-konva";

@Component({
  selector: 'onoff',
  standalone: true,
  imports: [CoreShapeComponent],
  template: `
     <ko-group [config]="{ x: 100, y: 100}">
      <ko-rect [config]="{ width: 100, height: 100, fill: 'red' }"></ko-rect>
    </ko-group>
  `
})
export class OnOffOutput {
  config = {
    x: 100,
    y: 100
  };
}

but it is not showing up at all, is there any way to do this?

[lavrton]

Please make a very small demo with codesandbox. YOu may use this as a template https://codesandbox.io/p/sandbox/22s4pf

[wwqbus]

https://codesandbox.io/p/devbox/falling-lake-vthr4w?workspaceId=ws_HfcqEAUpVLZGzkJP7NB1JR

i would expect a red rectangle to show up

[wwqbus]

any news about this?