This is the archived documentation for Angular v5. Please visit angular.io to see documentation for the current version of Angular.

ViewContainerRef

npm Package @angular/core
Module import { ViewContainerRef } from '@angular/core';
Source core/src/linker/view_container_ref.ts

Overview

      
      class ViewContainerRef {
  get element: ElementRef
  get injector: Injector
  get parentInjector: Injector
  clear(): void
  get(index: number): ViewRef | null
  get length: number
  createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, index?: number): EmbeddedViewRef<C>
  createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef<any>): ComponentRef<C>
  insert(viewRef: ViewRef, index?: number): ViewRef
  move(viewRef: ViewRef, currentIndex: number): ViewRef
  indexOf(viewRef: ViewRef): number
  remove(index?: number): void
  detach(index?: number): ViewRef | null
}
    

Description

Represents a container where one or more Views can be attached.

The container can contain two kinds of Views. Host Views, created by instantiating a Component via createComponent, and Embedded Views, created by instantiating an Embedded Template via createEmbeddedView.

The location of the View Container within the containing View is specified by the Anchor element. Each View Container can have only one Anchor Element and each Anchor Element can only have a single View Container.

Root elements of Views attached to this container become siblings of the Anchor Element in the Rendered View.

To access a ViewContainerRef of an Element, you can either place a Directive injected with ViewContainerRef on the Element, or you obtain it via a ViewChild query.

Members

      
      get element: ElementRef
    

Anchor element that specifies the location of this container in the containing View.


      
      get injector: Injector
    

      
      get parentInjector: Injector
    

      
      clear(): void
    

Destroys all Views in this container.


      
      get(index: number): ViewRef | null
    

Returns the ViewRef for the View located in this container at the specified index.


      
      get length: number
    

Returns the number of Views currently attached to this container.


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

Instantiates an Embedded View based on the `templateRef` and inserts it into this container at the specified index.

If index is not specified, the new View will be inserted as the last View in the container.

Returns the ViewRef for the newly created View.


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

Instantiates a single Component and inserts its Host View into this container at the specified index.

The component is instantiated using its ComponentFactory which can be obtained via resolveComponentFactory.

If index is not specified, the new View will be inserted as the last View in the container.

You can optionally specify the Injector that will be used as parent for the Component.

Returns the ComponentRef of the Host View created for the newly instantiated Component.


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

Inserts a View identified by a ViewRef into the container at the specified index.

If index is not specified, the new View will be inserted as the last View in the container.

Returns the inserted ViewRef.


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

Moves a View identified by a ViewRef into the container at the specified index.

Returns the inserted ViewRef.


      
      indexOf(viewRef: ViewRef): number
    

Returns the index of the View, specified via ViewRef, within the current container or -1 if this container doesn't contain the View.


      
      remove(index?: number): void
    

Destroys a View attached to this container at the specified index.

If index is not specified, the last View in the container will be removed.


      
      detach(index?: number): ViewRef | null
    

Use along with insert to move a View within the current container.

If the index param is omitted, the last ViewRef is detached.