Change detection is not working correctly in editor within angular

[wildercarrot]

I would like to suggest a change in the editor provider. I run into some issues, when I tried to use AngularMaterial in the editor - change detection was not working correctly which led to misbehaviour of components. However, when I attached the view to Application Ref everything seems to be working fine.

In designer.component.ts I added one more parameter to constructor:

private appRef: ApplicationRef

and in in editorProvider

this.appRef.attachView(this.lastEmbeddedView);

instead of

this.lastEmbeddedView?.detectChanges();

Could you kindly assess whether incorporating this change into the official repository would be beneficial?

[b4rtaz]

I run into some issues

Hello @wildercarrot! Could you describe what problem are you experiencing?

[wildercarrot]

The designer was rendering changes only when it was recreated (for example after clicking on a step and then when I went back to the global editor). That behaviour was caused by the embedded view detachment from applicationRef and changes were only detected once the editor was created and detectChanges() was run.

My proposed solution solves this issue :)

current code	proposed solution

[wildercarrot]

Proposed editorProvider implementation

    private editorProvider<E>(templateRef: TemplateRef<unknown>, editor: E) {
        return this.ngZone.run(() => {
            if (this.lastEmbeddedView) {
                this.lastEmbeddedView.destroy();
                this.lastEmbeddedView = undefined;
            }

            this.lastEmbeddedView = templateRef.createEmbeddedView({
                $implicit: editor
            });

                        this.appRef.attachView(this.lastEmbeddedView);

            const container = document.createElement('div');
            container.className = 'sqd-editor-angular';
            for (const node of this.lastEmbeddedView.rootNodes) {
                container.appendChild(node);
            }

            return container;
        });
    }

[b4rtaz]

I've just released the 0.13.7 version. It contains your fix. Thanks!

You may check that the Material UI works with the angular package here: https://nocode-js.github.io/sequential-workflow-designer/angular-app/

[wildercarrot]

Looks great! I'm happy to help 😊