ViewContainerRef • Angular

Angular Team

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.

The dependency injector for this view container.

@deprecated

No replacement

Destroys all views in this container.

@returnsvoid

Retrieves a view from this container.

@paramindexnumber

The 0-based index of the view to retrieve.

@returnsViewRef | null

The ViewRef instance, or null if the index is out of range.

Reports how many views are currently attached to this container.

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.

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.

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.

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.

Moves a view to a new location in this container.

@paramviewRefViewRef

The view to move.

Returns the index of a view within the current container.

@paramviewRefViewRef

The view to query.

@returnsnumber

The 0-based index of the view's position in this container, or -1 if this container doesn't contain the view.

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

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.

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({
  selector: 'dynamic',
  template: `<span>This is a content of a dynamic component.</span>`,
})
class DynamicComponent {
  vcr = inject(ViewContainerRef);
}

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