[ Web Proxy ]
URL:
Viewing: https://angular.dev/api/core/ViewContainerRef [Back]  [Original]
ViewContainerRef Angular Skip to main content
menu
close
more_horiz
menuAPI
@angular/core

ViewContainerRef

Class
stable

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

ComponentRefEmbeddedViewRefUsing ViewContainerRef

On this page

    arrow_upward_alt Back to the top

    API

        
      abstract class ViewContainerRef {  abstract readonly element: ElementRef<any>;  abstract readonly injector: Injector;  abstract readonly parentInjector: Injector;  abstract clear(): void;  abstract get(index: number): ViewRef | null;  abstract readonly length: number;
      abstract createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C | undefined, options?: { index?: number | undefined; injector?: Injector | undefined; } | undefined): EmbeddedViewRef<C>;  abstract createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C | undefined, index?: number | undefined): EmbeddedViewRef<C>;
      abstract createComponent<C>(componentType: Type<C>, options?: { 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): ComponentRef<C>;  abstract insert(viewRef: ViewRef, index?: number | undefined): ViewRef;  abstract move(viewRef: ViewRef, currentIndex: number): ViewRef;  abstract indexOf(viewRef: ViewRef): number;  abstract remove(index?: number | undefined): void;  abstract detach(index?: number | undefined): ViewRef | null;}

    element

    ElementRef<any>

    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.

    injector

    Injector

    The dependency injector for this view container.

    parentInjector

    Injector
    @deprecated

    No replacement

    clear

    void

    Destroys all views in this container.

    @returnsvoid

    get

    ViewRef | null

    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.

    length

    number

    Reports how many views are currently attached to this container.

    createEmbeddedView

    2 overloads

    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.
    @returnsEmbeddedViewRef<C>

    The ViewRef instance for the newly created 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.

    @returnsEmbeddedViewRef<C>

    The ViewRef instance for the newly created view.

    createComponent

    ComponentRef<C>

    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.
    @returnsComponentRef<C>

    The new ComponentRef which contains the component instance and the host view.

    insert

    ViewRef

    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.

    @returnsViewRef

    The inserted ViewRef instance.

    move

    ViewRef

    Moves a view to a new location in this container.

    @paramviewRefViewRef

    The view to move.

    @paramcurrentIndexnumber
    @returnsViewRef

    The moved ViewRef instance.

    indexOf

    number

    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.

    remove

    void

    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

    detach

    ViewRef | null

    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.

    @returnsViewRef | null

    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();
  }
}
    Jump to details

    Social Media

    Community

    Resources

    Community translations

    Super-powered by Google 2010-2026. Code licensed under an MIT-style License . Documentation licensed under CC BY 4.0 . Built by Angular at v22.1.3+sha-ba3bc47.

    Web Proxy Viewer  |  New URL  |  Original Page