Bootstrap the same Angular standalone component multiple times on one page

Edit

Thanks to the answer and comments by Andrew, I will change my approach:

• Switch from survey-angular to survey-angular-ui package
• Follow the approach per widget as detailed in this example
• Create a single module that declares all these components as well as registering them with the Serialiser:

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 {}

• Then import this CustomWidgetsModule in your main app module

I have left the old question title intact and body below for future reference.

I'm looking at the usage of standalone Angular components as a base for writing advanced widgets to be used as custom questions for SurveyJS.

My current approach is to generate an NgModule on the fly, configure it with the relevant imports and then bootstrap 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 thought I could get rid of the generated NgModule and use the bootstrapApplication API to bootstrap the component.

This works for a single component. However if I have multiple identical standalone components, they all attach to the HTML element of the first one. In other words: I seem to be unable to bootstrap 2 identical standalone components to different HTML elements?

With the previous approach (as shown in the code example above), I could specify the element the module should bootstrap to. Is there an equivalent for this approach using standalone components?

I would suggest stopping using afterRender.

We have introduced Angular rendering for SurveyJS survey-form runner and for Creator. You need to remove "survey-angular" package and use "survey-angular-ui" instead. "survey-angular" is a wrapper for survey for knockout JS. "survey-angular-ui" is an Angular rendering that uses platform independent "survey-core". You can find more here.

You can override our rendering using Angular component. Here is the example of changing choice item rendering in dropdown question. We are working to make SurveyJS libraries a Lego constructor, where almost any part can be overridden by a custom component, Angular or React based on platform.

Thank you,

Andrew, SurveyJS Team