W3cubDocs

/Angular

ViewContainerRef

class

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

See more...

abstract class ViewContainerRef {
  abstract element: ElementRef
  abstract injector: Injector
  abstract parentInjector: Injector
  abstract length: number
  abstract clear(): void
  abstract get(index: number): ViewRef | null
  abstract createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, options?: { index?: number; injector?: Injector; }): EmbeddedViewRef<C>
  abstract createComponent<C>(componentType: Type<C>, options?: { index?: number; injector?: Injector; ngModuleRef?: NgModuleRef<unknown>; environmentInjector?: EnvironmentInjector | NgModuleRef<unknown>; projectableNodes?: Node[][]; }): ComponentRef<C>
  abstract insert(viewRef: ViewRef, index?: number): ViewRef
  abstract move(viewRef: ViewRef, currentIndex: number): ViewRef
  abstract indexOf(viewRef: ViewRef): number
  abstract remove(index?: number): void
  abstract detach(index?: number): ViewRef | null
}

See also

Description

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.

Properties

Property Description
abstract element: ElementRef Read-Only

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.
abstract injector: Injector Read-Only

The dependency injector for this view container.
abstract parentInjector: Injector Deprecated Read-Only

Deprecated No replacement
abstract length: number Read-Only

Reports how many views are currently attached to this container.

Methods

clear()

Destroys all views in this container.

abstract clear(): void

Parameters

There are no parameters.

Returns

void
get()

Retrieves a view from this container.

abstract get(index: number): ViewRef | null

Parameters
index number

The 0-based index of the view to retrieve.
Returns

ViewRef | null: The ViewRef instance, or null if the index is out of range.
createEmbeddedView()

Instantiates an embedded view and inserts it into this container.

abstract createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, options?: { index?: number; injector?: Injector; }): EmbeddedViewRef<C>

Parameters
templateRef TemplateRef<C>

The HTML template that defines the view.
context C

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

Optional. Default is undefined.
options object

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.

Optional. Default is undefined.
Returns

EmbeddedViewRef<C>: The ViewRef instance for the newly created view.

abstract createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, index?: number): EmbeddedViewRef<C>

Parameters
templateRef TemplateRef<C>

The HTML template that defines the view.
context C

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

Optional. Default is undefined.
index number

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.

Optional. Default is undefined.
Returns

EmbeddedViewRef<C>: The ViewRef instance for the newly created view.
createComponent()

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

abstract createComponent<C>(componentType: Type<C>, options?: { index?: number; injector?: Injector; ngModuleRef?: NgModuleRef<unknown>; environmentInjector?: EnvironmentInjector | NgModuleRef<unknown>; projectableNodes?: Node[][]; }): ComponentRef<C>

Parameters
componentType Type<C>

Component Type to use.
options object

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.

Optional. Default is undefined.
Returns

ComponentRef<C>: The new ComponentRef which contains the component instance and the host view.

abstract createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], environmentInjector?: EnvironmentInjector | NgModuleRef<any>): ComponentRef<C>

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

Parameters
componentFactory ComponentFactory<C>

Component factory to use.
index number

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.

Optional. Default is undefined.
injector Injector

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

Optional. Default is undefined.
projectableNodes any[][]

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

Optional. Default is undefined.
environmentInjector EnvironmentInjector | NgModuleRef<any>

Optional. Default is undefined.
Returns

ComponentRef<C>: The new ComponentRef which contains the component instance and the host view.
insert()

Inserts a view into this container.

abstract insert(viewRef: ViewRef, index?: number): ViewRef

Parameters
viewRef ViewRef

The view to insert.
index number

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

Optional. Default is undefined.
Returns

ViewRef: The inserted ViewRef instance.
move()

Moves a view to a new location in this container.

abstract move(viewRef: ViewRef, currentIndex: number): ViewRef

Parameters
viewRef ViewRef

The view to move.
currentIndex number
Returns

ViewRef: The moved ViewRef instance.
indexOf()

Returns the index of a view within the current container.

abstract indexOf(viewRef: ViewRef): number

Parameters
viewRef ViewRef

The view to query.
Returns

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

Destroys a view attached to this container

abstract remove(index?: number): void

Parameters
index number

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

Optional. Default is undefined.
Returns

void
detach()

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

abstract detach(index?: number): ViewRef | null

Parameters
index number

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

Optional. Default is undefined.
Returns

ViewRef | null

© 2010–2023 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/api/core/ViewContainerRef