This is the archived documentation for Angular v6. Please visit angular.io to see documentation for the current version of Angular.
API > @angular/core

ViewContainerRef

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, index?: number): EmbeddedViewRef<C>
  abstract createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef<any>): 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 Read-only.
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
      
      abstract clear(): void

Parameters

There are no parameters.

Returns

void

get()

Retrieves a view from this container.
abstract get(index: number): ViewRef | null
      
      abstract get(index: number): ViewRef | null

Parameters

index

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, index?: number): EmbeddedViewRef<C>
      
      abstract createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, index?: number): EmbeddedViewRef<C>

Parameters

templateRef

The HTML template that defines the view.
context

Type: C.

Optional. Default is undefined.
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.

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>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef<any>): ComponentRef<C>
      
      abstract createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef<any>): ComponentRef<C>

Parameters

componentFactory

The factory to use.
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.

Optional. Default is undefined.
injector

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

Optional. Default is undefined.
projectableNodes

Type: any[][].

Optional. Default is undefined.
ngModule

Type: NgModuleRef.

Optional. Default is undefined.

Returns

ComponentRef<C>: The new component instance, containing the host view.

insert()

Inserts a view into this container.
abstract insert(viewRef: ViewRef, index?: number): ViewRef
      
      abstract insert(viewRef: ViewRef, index?: number): ViewRef

Parameters

viewRef

The view to insert.
index

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
      
      abstract move(viewRef: ViewRef, currentIndex: number): ViewRef

Parameters

viewRef

The view to move.
currentIndex

Type: number.

Returns

ViewRef: The moved ViewRef instance.

indexOf()

Returns the index of a view within the current container.
abstract indexOf(viewRef: ViewRef): number
      
      abstract indexOf(viewRef: ViewRef): number

Parameters

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
      
      abstract remove(index?: number): void

Parameters

index

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
      
      abstract detach(index?: number): ViewRef | null

Parameters

index

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