Multiple custom designs not loaded

Describe the bug

I have a Angular project and want to display two different types of custom sockets but it always uses the design of the first requested socket.

editor.ts:

 render.addPreset(
        Presets.classic.setup({
          customize: {
            socket(data) {
              if (Math.random() > 0.5) {
                console.log("bool")
                return BoolSocketComponent;
              } else {
                console.log("real")
                return RealSocketComponent;
              } 
            }
          }
        })
      );

50/50 chance between the design, for testing later will be dependent on socket type

components: socket 1: css:

:host{
    display: inline-block;
    cursor: pointer;
    border: 3px solid white;
    border-radius: 1em;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: #ffffff66;
    margin: 0.1em 0.7em;
    z-index: 2;
    box-sizing: border-box;
}

:host:hover{
    border-width: 4px;
}

ts:

import {
    Component,
    Input,
    HostBinding,
    ChangeDetectorRef,
    OnChanges
  } from "@angular/core";

  @Component({
    template: ,    
    styleUrls: ["./bool-socket.component.css"]
  })
  export class BoolSocketComponent implements OnChanges {
    @Input() data!: any;
    @Input() rendered!: any;

    @HostBinding("title") get title() {
      return this.data.name;
    }

    constructor(private cdr: ChangeDetectorRef) {
      this.cdr.detach();
    }

    ngOnChanges(): void {
      this.cdr.detectChanges();
      requestAnimationFrame(() => this.rendered());
    }
  }

The second socket-component is implemented in the same way just a different name and style.

I logged which type was returned (see top) And what i found was that all sockets always have the same design as the first requested one...

I cant find what the issue is... Any ideas? Looks like a bug to me

I have the same issue with the connections!

Example to reproduce

No response

How to reproduce

Use Angular
create two components for different styled sockets
let the render function switch between them

Expected behavior

I expect each socket to have the color of the returned custom socket

Dependencies

project@0.0.0 ├── @angular-devkit/build-angular@17.3.8 ├── @angular/animations@17.3.12 ├── @angular/cli@17.3.8 ├── @angular/common@17.3.12 ├── @angular/compiler-cli@17.3.12 ├── @angular/compiler@17.3.12 ├── @angular/core@17.3.12 ├── @angular/elements@17.3.12 ├── @angular/forms@17.3.12 ├── @angular/platform-browser-dynamic@17.3.12 ├── @angular/platform-browser@17.3.12 ├── @angular/router@17.3.12 ├── @types/jasmine@5.1.4 ├── jasmine-core@5.1.2 ├── karma-chrome-launcher@3.2.0 ├── karma-coverage@2.2.1 ├── karma-jasmine-html-reporter@2.1.0 ├── karma-jasmine@5.1.0 ├── karma@6.4.3 ├── rete-angular-plugin@2.1.1 ├── rete-area-plugin@2.0.4 ├── rete-auto-arrange-plugin@2.0.1 ├── rete-connection-plugin@2.0.2 ├── rete-dock-plugin@2.0.2 ├── rete-render-utils@2.0.2 ├── rete@2.0.3 ├── rxjs@7.8.1 ├── tslib@2.6.3 ├── typescript@5.4.5 └── zone.js@0.14.8

Also tried with angular 15, also did not work

Platform

Chrome and Angular 17/ 15

Relevant log output

No response

Code of Conduct

[X] I agree to follow this project's Code of Conduct

retejs / angular-plugin