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

• ViewContainerRef

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>

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