Edit
After receiving input from Andrew, I have decided to adjust my strategy:
- Replacing
survey-angularwith thesurvey-angular-uipackage - Implementing a widget approach similar to the one outlined in this example
- Developing a single module that encompasses all components and registers them with the Serializer:
import { NgModule } from '@angular/core';
import { ColorPickerModule } from 'ngx-color-picker';
import { ColorPickerComponent } from './color.component';
import { registerColorPicker } from './color.model';
// Register all components here
registerColorPicker();
@NgModule({
// Declare all Angular components
declarations: [ColorPickerComponent],
// Import any library modules you need for your custom widgets
imports: [ColorPickerModule],
})
export class CustomWidgetsModule {}
- Next, import this
CustomWidgetsModuleinto your main app module
I have retained the original question title and content below for future reference.
I am exploring the use of standalone Angular components as a foundation for developing advanced widgets to serve as custom questions for SurveyJS.
My initial method involves generating an NgModule dynamically, configuring it with necessary imports, and then bootstrapping it to the HTML element of the custom question:
afterRender: async (question: Question, el: HTMLDivElement) => {
@NgModule({
imports: [BrowserModule, HttpClientModule, ...],
providers: [...],
})
class CustomQuestionModule implements DoBootstrap {
ngDoBootstrap(appRef: ApplicationRef): void {
appRef.bootstrap(widgetComponentClass, el);
}
}
await platformBrowserDynamic().bootstrapModule(CustomQuestionModule);
}
With the introduction of standalone components in Angular 14, I anticipated being able to eliminate the generated NgModule and utilize the bootstrapApplication API for component bootstrapping.
This works effectively for a singular component. However, when attempting to bootstrap multiple identical standalone components, they all attach to the HTML element of the initial component. In essence: I am struggling to bootstrap two identical standalone components to separate HTML elements?
With the previous method (as depicted in the code snippet above), I could specify the target element for module bootstrapping. Is there a comparable feature available using standalone components?