Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

EmbeddedViewRef

Represents an Angular view in a view container. An embedded view can be referenced from a component other than the hosting component whose template defines it, or it can be defined independently by a TemplateRef.

See more...

      
      abstract class EmbeddedViewRef<C> extends ViewRef {
  abstract context: C
  abstract rootNodes: any[]

  // inherited from core/ViewRef
  abstract destroyed: boolean
abstract destroy(): void
abstract onDestroy(callback: Function): void // inherited from core/ChangeDetectorRef
abstract markForCheck(): void
abstract detach(): void
abstract detectChanges(): void
abstract checkNoChanges(): void
abstract reattach(): void }

See also

Description

Properties of elements in a view can change, but the structure (number and order) of elements in a view cannot. Change the structure of elements by inserting, moving, or removing nested views in a view container.

Further information is available in the Usage Notes...

Properties

Property Description
abstract context: C

The context for this view, inherited from the anchor element.

abstract rootNodes: any[] Read-Only

The root nodes for this embedded view.

Usage notes

The following template breaks down into two separate TemplateRef instances, an outer one and an inner one.

      
      Count: {{items.length}}
<ul>
  <li *ngFor="let  item of items">{{item}}</li>
</ul>
    

This is the outer TemplateRef:

      
      Count: {{items.length}}
<ul>
  <ng-template ngFor let-item [ngForOf]="items"></ng-template>
</ul>
    

This is the inner TemplateRef:

      
      <li>{{item}}</li>
    

The outer and inner TemplateRef instances are assembled into views as follows:

      
      <!-- ViewRef: outer-0 -->
Count: 2
<ul>
  <ng-template view-container-ref></ng-template>
  <!-- ViewRef: inner-1 --><li>first</li><!-- /ViewRef: inner-1 -->
  <!-- ViewRef: inner-2 --><li>second</li><!-- /ViewRef: inner-2 -->
</ul>
<!-- /ViewRef: outer-0 -->