Help Angular by taking a 1 minute survey!Go to surveyHome
API > @angular/core

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): any

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

Properties

Property Description
abstract context: C Read-only.

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

This is the inner TemplateRef:

<li>{{item}}</li> 
      
      <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 --> 
      
      <!-- 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 -->