Hi we are currently evaluating SurveyJs.
We have one use-case where we implemented an Angular component and added it as a custom widget to surveyjs.
The component contains an input field and a table.
When the user enters something in the input field a request to an API endpoint gets sent and we want to display those results we get back in the table. The api request works as expected.
But the issue is, that the table is not populated with the response.
My question would be is there a way to update that table, seems like that surveyjs does not support change detection and thus the table stays empty.
I followed the documentation https://surveyjs.io/form-library/documentation/customize-question-types/third-party-component-integration-angular
Kind Regards
Hello Sisak,
I'd be in a better position to suggest an option if I could review the demo. Would you please share a sample for research?
Hi Jane,
so I've created a small example. So there are two buttons, one changes the title and the other one should fetch the data from an endpoint. Both times the component does not get updated, after clicking on the button. If the sandbox app fails to startup the first time try reloading https://codesandbox.io/s/surveyjs-third-party-angular-component-integration-forked-oofeuf
Hello,
Thank you for sharing the sample. I may need additional time to research it. Please stay tuned.
Hi Sisak,
Unfortunately, the following exception is raised within the SearchComponent_Template when loading your Code Sandbox:
ERROR TypeError: Cannot read properties of undefined (reading '0') at SearchComponent_Template (ng:///SearchComponent.js:27:46) at executeTemplate (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4800:231) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4769:163) at refreshComponent (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5101:165) at refreshChildComponents (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4711:1733) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4778:57) at refreshComponent (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5101:165) at refreshChildComponents (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4711:1733) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4778:57) at refreshEmbeddedViews (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5085:996) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4774:40) at refreshEmbeddedViews (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5085:996) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4774:40) at refreshEmbeddedViews (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5085:996) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4774:40) at refreshEmbeddedViews (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5085:996) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4774:40) at refreshEmbeddedViews (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5085:996) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4774:40) at refreshEmbeddedViews (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5085:996) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4774:40) at refreshEmbeddedViews (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5085:996) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4774:40) at refreshEmbeddedViews (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5085:996) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4774:40) at refreshEmbeddedViews (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5085:996) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4774:40) at refreshEmbeddedViews (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5085:996) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4774:40) at refreshEmbeddedViews (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5085:996) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4774:40) at refreshEmbeddedViews (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5085:996) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4774:40) at refreshEmbeddedViews (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5085:996) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4774:40) at refreshEmbeddedViews (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5085:996) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4774:40) at refreshEmbeddedViews (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5085:996) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4774:40) at refreshEmbeddedViews (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5085:996) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4774:40) at refreshEmbeddedViews (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5085:996) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4774:40) at refreshEmbeddedViews (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5085:996) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4774:40) at refreshEmbeddedViews (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5085:996) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4774:40) at refreshEmbeddedViews (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5085:996) at refreshView (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:4774:40) at refreshEmbeddedViews (https://oofeuf.csb.app/node_modules/@angular/core/fesm2020/core.mjs:5085:996)
Please update your custom component's code to resolve the issue. Feel free to share the updated sample with me.
I've updated the sample, it should work now: https://codesandbox.io/s/surveyjs-third-party-angular-component-integration-forked-oofeuf
Thank you for the update. I'll review your sample and get back to you shortly.