@angular/core

ViewContainerRef

Class

Represents a container where one or more views can be attached to a component.

  
    abstract class ViewContainerRef {
}

Represents a container where one or more views can be attached to a component.

Can contain host views (created by instantiating a component with the createComponent() method), and embedded views (created by instantiating a TemplateRef with the createEmbeddedView() method).

A view container instance can contain other view containers, creating a view hierarchy.

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({  standalone: true,  selector: 'dynamic',  template: `<span>This is a content of a dynamic component.</span>`,})class DynamicComponent {  vcr = inject(ViewContainerRef);}@Component({  standalone: true,  selector: 'app',  template: `<main>Hi! This is the main content.</main>`,})class AppComponent {  vcr = inject(ViewContainerRef);  ngAfterViewInit() {    const compRef = this.vcr.createComponent(DynamicComponent);    compRef.changeDetectorRef.detectChanges();  }}

element

ElementRef<any>

Anchor element that specifies the location of this container in the containing view. Each view container can have only one anchor element, and each anchor element can have only a single view container.

Root elements of views attached to this container become siblings of the anchor element in the rendered view.

Access the ViewContainerRef of an element by placing a Directive injected with ViewContainerRef on the element, or use a ViewChild query.

injector

Injector

The dependency injector for this view container.

parentInjector

Injector

@deprecated

No replacement

clear

void

Destroys all views in this container.

@returnsvoid

get

ViewRef

Retrieves a view from this container.

@paramindexnumber

The 0-based index of the view to retrieve.

@returnsViewRef

length

number

Reports how many views are currently attached to this container.

createEmbeddedView

2 overloads

Instantiates an embedded view and inserts it into this container.

@paramtemplateRefTemplateRef<C>

The HTML template that defines the view.

@paramcontextC

The data-binding context of the embedded view, as declared in the <ng-template> usage.

@paramoptions{ index?: number; injector?: Injector; }

Extra configuration for the created view. Includes:

index: The 0-based index at which to insert the new view into this container. If not specified, appends the new view as the last entry.
injector: Injector to be used within the embedded view.

@returnsEmbeddedViewRef<C>

Instantiates an embedded view and inserts it into this container.

@paramtemplateRefTemplateRef<C>

The HTML template that defines the view.

@paramcontextC

The data-binding context of the embedded view, as declared in the <ng-template> usage.

@paramindexnumber

The 0-based index at which to insert the new view into this container. If not specified, appends the new view as the last entry.

@returnsEmbeddedViewRef<C>

createEmbeddedView

2 overloads

Instantiates an embedded view and inserts it into this container.

@paramtemplateRefTemplateRef<C>

The HTML template that defines the view.

@paramcontextC

The data-binding context of the embedded view, as declared in the <ng-template> usage.

@paramoptions{ index?: number; injector?: Injector; }

Extra configuration for the created view. Includes:

index: The 0-based index at which to insert the new view into this container. If not specified, appends the new view as the last entry.
injector: Injector to be used within the embedded view.

@returnsEmbeddedViewRef<C>

Instantiates an embedded view and inserts it into this container.

@paramtemplateRefTemplateRef<C>

The HTML template that defines the view.

@paramcontextC

The data-binding context of the embedded view, as declared in the <ng-template> usage.

@paramindexnumber

The 0-based index at which to insert the new view into this container. If not specified, appends the new view as the last entry.

@returnsEmbeddedViewRef<C>

createComponent

2 overloads

Instantiates a single component and inserts its host view into this container.

@paramcomponentTypeType<C>

Component Type to use.

@paramoptions

{ index?: number; injector?: Injector; ngModuleRef?: NgModuleRef<unknown>; environmentInjector?: EnvironmentInjector | NgModuleRef<unknown>; projectableNodes?: Node[][]; }

An object that contains extra parameters:

index: the index at which to insert the new component's host view into this container. If not specified, appends the new view as the last entry.
injector: the injector to use as the parent for the new component.
ngModuleRef: an NgModuleRef of the component's NgModule, you should almost always provide this to ensure that all expected providers are available for the component instantiation.
environmentInjector: an EnvironmentInjector which will provide the component's environment. you should almost always provide this to ensure that all expected providers are available for the component instantiation. This option is intended to replace the ngModuleRef parameter.
projectableNodes: list of DOM nodes that should be projected through <ng-content> of the new component instance.

@returnsComponentRef<C>

Instantiates a single component and inserts its host view into this container.

@deprecated

Angular no longer requires component factories to dynamically create components. Use different signature of the createComponent method, which allows passing Component class directly.

@paramcomponentFactoryComponentFactory<C>

Component factory to use.

@paramindexnumber

The index at which to insert the new component's host view into this container. If not specified, appends the new view as the last entry.

@paraminjectorInjector

The injector to use as the parent for the new component.

@paramprojectableNodesany[][]

List of DOM nodes that should be projected through <ng-content> of the new component instance.

@paramenvironmentInjectorEnvironmentInjector | NgModuleRef<any>

@returnsComponentRef<C>

createComponent

2 overloads

Instantiates a single component and inserts its host view into this container.

@paramcomponentTypeType<C>

Component Type to use.

@paramoptions

{ index?: number; injector?: Injector; ngModuleRef?: NgModuleRef<unknown>; environmentInjector?: EnvironmentInjector | NgModuleRef<unknown>; projectableNodes?: Node[][]; }

An object that contains extra parameters:

index: the index at which to insert the new component's host view into this container. If not specified, appends the new view as the last entry.
injector: the injector to use as the parent for the new component.
ngModuleRef: an NgModuleRef of the component's NgModule, you should almost always provide this to ensure that all expected providers are available for the component instantiation.
environmentInjector: an EnvironmentInjector which will provide the component's environment. you should almost always provide this to ensure that all expected providers are available for the component instantiation. This option is intended to replace the ngModuleRef parameter.
projectableNodes: list of DOM nodes that should be projected through <ng-content> of the new component instance.

@returnsComponentRef<C>

Instantiates a single component and inserts its host view into this container.

@deprecated

Angular no longer requires component factories to dynamically create components. Use different signature of the createComponent method, which allows passing Component class directly.

@paramcomponentFactoryComponentFactory<C>

Component factory to use.

@paramindexnumber

The index at which to insert the new component's host view into this container. If not specified, appends the new view as the last entry.

@paraminjectorInjector

The injector to use as the parent for the new component.

@paramprojectableNodesany[][]

List of DOM nodes that should be projected through <ng-content> of the new component instance.

@paramenvironmentInjectorEnvironmentInjector | NgModuleRef<any>

@returnsComponentRef<C>

insert

ViewRef

Inserts a view into this container.

@paramviewRefViewRef

The view to insert.

@paramindexnumber

The 0-based index at which to insert the view. If not specified, appends the new view as the last entry.

@returnsViewRef

move

ViewRef

Moves a view to a new location in this container.

@paramviewRefViewRef

The view to move.

@paramcurrentIndexnumber

@returnsViewRef

indexOf

number

Returns the index of a view within the current container.

@paramviewRefViewRef

The view to query.

@returnsnumber

remove

void

Destroys a view attached to this container

@paramindexnumber

The 0-based index of the view to destroy. If not specified, the last view in the container is removed.

@returnsvoid

detach

ViewRef

Detaches a view from this container without destroying it. Use along with insert() to move a view within the current container.

@paramindexnumber

The 0-based index of the view to detach. If not specified, the last view in the container is detached.

@returnsViewRef