createComponent
function
stable
Creates a ComponentRef instance based on provided component type and a set of options.
API
function createComponent<C>( component: Type<C>, options: { environmentInjector: EnvironmentInjector; hostElement?: Element | undefined; elementInjector?: Injector | undefined; projectableNodes?: Node[][] | undefined; directives?: (Type<unknown> | DirectiveWithBindings<unknown>)[] | undefined; bindings?: Binding[] | undefined; },): ComponentRef<C>;Usage Notes
The example below demonstrates how the createComponent function can be used
to create an instance of a ComponentRef dynamically and attach it to an ApplicationRef,
so that it gets included into change detection cycles.
Note: the example uses standalone components, but the function can also be used for non-standalone components (declared in an NgModule) as well.
@Component({ template: `Hello {{ name }}!`})class HelloComponent { name = 'Angular';}@Component({ template: `<div id="hello-component-host"></div>`})class RootComponent {}// Bootstrap an application.const applicationRef = await bootstrapApplication(RootComponent);// Locate a DOM node that would be used as a host.const hostElement = document.getElementById('hello-component-host');// Get an `EnvironmentInjector` instance from the `ApplicationRef`.const environmentInjector = applicationRef.injector;// We can now create a `ComponentRef` instance.const componentRef = createComponent(HelloComponent, {hostElement, environmentInjector});// Last step is to register the newly created ref using the `ApplicationRef` instance// to include the component view into change detection cycles.applicationRef.attachView(componentRef.hostView);componentRef.changeDetectorRef.detectChanges();Jump to details