SurveyJs in Angular - overriding the default layout of stock questions

Question

I want to render the SuveyJS form I have using the existing form layout I have, CSS in this case alone will not cut it and I need to be able to render the question in a specific way (using specific divs, spans etc.)

I have my new component, it extends the questionTextModel like this:

export class CustomTextQuestionComponent extends QuestionAngular<QuestionTextModel>

And this is registered in app.module like this:

AngularComponentFactory.Instance.registerComponent('something Here', CustomTextQuestionComponent);

In that 'something Here' string if I put the following it produces differing results:

If I put: 'text-question' then the default layout of a text question (i.e. a single input field) is half replaced with my component. The default SurveyJs renders as my component but the overall question layout and text remains the same. So in short it half works and renders on screen very oddly.

If I put 'question-text' or just 'text' then nothing changes and the default SurveyJs text input format is rendered to screen.

I cannot find documentation on how to replace the default question layouts with your own versions of the same. Can anyone help point me in the right direction?

This is for the latest version of SurveyJs using Angular 19.

Have you tried to override question? AngularComponentFactory.Instance.registerComponent("question", CustomQuestionComponent); — Bojan Kogoj
– Bojan Kogoj, Commented Aug 12 at 14:27

JaneJane · Accepted Answer · 2025-09-12 13:03:53Z

In Angular SurveyJS Form Library, a question is rendered by the Question component (question.component.ts/question.component.html). This component contains various UI elements. For instance, the component which render question errors, the header component which may appear above or under the main content and the component which renders the main question content.

When you register a custom question type and implement a custom renderer, you actually override the question content component.

Based on your explanation, I understand that you wish to customize the appearance of SurveyJS questions. If you wish to modify the appearance of SurveyJS questions, we suggest that you create a custom theme using the embedded Theme Editor. A custom theme contains various appearance settings such as colors, element sizes, border radius, fonts, etc.
If you cannot create 100% identical forms by using a custom theme, the next step to try is to modify the form CSS using corresponding API: Apply Custom CSS Classes.

Unfortunately, the entire question component cannot be overridden at the moment. If you plan to override the entire question component, take note that all SurveyJS question UI features will be unavailable; in particular, you would require to handle responsiveness and render question errors, etc. Please let me know if you would like to proceed with overriding the entire question component.

I suggest that you use default SurveyJS question types and align a question title on the left and introduce the space between the title and an input field by placing a question within a panel and specifying questionTitleWidth. For example: View Demo.

Collectives™ on Stack Overflow

SurveyJs in Angular - overriding the default layout of stock questions

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related