@angular/core

ViewContainerRef

Class

stable

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

API

    
      abstract class ViewContainerRef {
}

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 | null

Retrieves a view from this container.

@paramindexnumber

The 0-based index of the view to retrieve.

@returnsViewRef | null

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 | undefined

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

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

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 | undefined

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

@paramindexnumber | undefined

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 component and inserts its host view into this view container.

@paramcomponentTypeType<C>

Component Type to use.

@paramoptions

{ index?: number | undefined; injector?: Injector | undefined; ngModuleRef?: NgModuleRef<unknown> | undefined; environmentInjector?: EnvironmentInjector | NgModuleRef<unknown> | undefined; projectableNodes?: Node[][] | undefined; directives?: (Type<unknown> | DirectiveWithBindings<unknown>)[] | undefined; bindings?: Binding[] | undefined; } | undefined

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.
directives: Directives that should be applied to the component.
bindings: Bindings that should be applied to the component.

@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 | undefined

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 | undefined

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

@paramprojectableNodesany[][] | undefined

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

@paramenvironmentInjectorEnvironmentInjector | NgModuleRef<any> | undefined

@paramdirectives(Type<unknown> | DirectiveWithBindings<unknown>)[] | undefined

Directives that should be applied to the component.

@parambindingsBinding[] | undefined

Bindings that should be applied to the component.

@returnsComponentRef<C>

insert

ViewRef

Inserts a view into this container.

@paramviewRefViewRef

The view to insert.

@paramindexnumber | undefined

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 | undefined

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

@returnsvoid

detach

ViewRef | null

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

@paramindexnumber | undefined

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

@returnsViewRef | null

Description

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.

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({  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();  }}