GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing angular.dev — ViewContainerRef • Angular

API

    
      abstract class ViewContainerRef {
}

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.

The dependency injector for this view container.

@deprecated

No replacement

Destroys all views in this container.

@returnsvoid

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.

Reports how many views are currently attached to this container.

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; onError?: ((error: Error, details: ErrorDetails) => void) | 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.
onError: A callback that will be invoked when an error occurs during the view's change detection or lifecycle hooks. Note that this will not catch errors thrown during the view's creation.

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

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; onError?: ((error: Error, context: ErrorDetails) => void) | 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.
onError: A callback that will be invoked when an error occurs during the component's change detection or lifecycle hooks. Note that this will not catch errors thrown during the component's construction.

@returnsComponentRef<C>

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

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.

Moves a view to a new location in this container.

@paramviewRefViewRef

The view to move.

@paramcurrentIndexnumber

The 0-based index of the new location.

@returnsViewRef

The moved ViewRef instance.

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.

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

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

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.