Help Angular by taking a 1 minute survey!Go to surveyHome
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 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, index?: number): EmbeddedViewRef<C>
      
      abstract createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, index?: number): EmbeddedViewRef<C>
Parameters
templateRef TemplateRef

The HTML template that defines the view.
context C

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>(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 ComponentFactory

The 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[][]

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