Question T13161
Visible to All Users

Angular Custom Widget - Search - Table not updated with response

created 2 years ago (modified 2 years ago)

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

Show previous comments (3)

    Hi Sisak,
    Unfortunately, the following exception is raised within the SearchComponent_Template when loading your Code Sandbox:

    Code
    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.

        Thank you for the update. I'll review your sample and get back to you shortly.

        Answers

        created 2 years ago (modified 2 years ago)

        Thanks Jane. In the meantime I found out that if I set the model.value it will update the widget, but this does not work always, especially with third party components like AG-Grid

        Edit:
        Alright, I made it work now :). I used ngZone as a workaround and everything works as expected, the ag-grid components get updated

          Comments (1)

            Hi Sisak,
            Thank you for the update. I'm happy to hear that you managed to achieve your goal. Please feel free to contact us if you have further questions.