SurveyJs in Angular - overriding the default layout of stock questions

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.

Continue reading...