ViewContainerRef
Represents a container where one or more views can be attached to a component.
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, options?: { index?: number; injector?: Injector; }): EmbeddedViewRef<C>
abstract createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, index?: number): EmbeddedViewRef<C>
abstract createComponent<C>(componentType: Type<C>, options?: { index?: number; injector?: Injector; ngModuleRef?: NgModuleRef<unknown>; environmentInjector?: EnvironmentInjector | NgModuleRef<unknown>; projectableNodes?: Node[][]; }): ComponentRef<C>
abstract createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], environmentInjector?: EnvironmentInjector | 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.
Further information is available in the Usage Notes...
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 |
abstract injector: Injector
|
Read-Only
The dependency injector for this view container. |
abstract parentInjector: Injector
|
Read-Only
Deprecated No replacement |
abstract length: number
|
Read-Only
Reports how many views are currently attached to this container. |
Methods
clear() |
---|
Destroys all views in this container. |
ParametersThere are no parameters. Returns
|
get() |
---|
Retrieves a view from this container. |
createEmbeddedView() | |||||||||
---|---|---|---|---|---|---|---|---|---|
Instantiates an embedded view and inserts it into this container. |
|||||||||
Parameters
Returns
|
|||||||||
Parameters
Returns
|
createComponent() | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Instantiates a single component and inserts its host view into this container. |
|||||||||||||||
Parameters
Returns
|
|||||||||||||||
Deprecated Angular no longer requires component factories to dynamically create components.
Use different signature of the Parameters
Returns
|
insert() |
---|
Inserts a view into this container. |
move() |
---|
Moves a view to a new location in this container. |
indexOf() |
---|
Returns the index of a view within the current container. |
remove() |
---|
Destroys a view attached to this container |
detach() |
---|
Detaches a view from this container without destroying it.
Use along with |
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({
standalone: true,
selector: 'dynamic',
template: `<span>This is a content of a dynamic component.</span>`,
})
class DynamicComponent {
vcr = inject(ViewContainerRef);
}
@Component({
standalone: true,
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();
}
}