EmbeddedViewRef

class

npm Package	@angular/core
Module	import { EmbeddedViewRef } from '@angular/core';
Source	core/src/linker/view_ref.ts

Overview

class EmbeddedViewRef<C> extends ViewRef {
  get context: C
  get rootNodes: any[]
  // inherited from core/ViewRef
  destroy(): void
  get destroyed: boolean
  onDestroy(callback: Function): any
  // inherited from core/ChangeDetectorRef
  markForCheck(): void
  detach(): void
  detectChanges(): void
  checkNoChanges(): void
  reattach(): void
}

Description

Represents an Angular View.

A View is a fundamental building block of the application UI. It is the smallest grouping of Elements which are created and destroyed together.

Properties of elements in a View can change, but the structure (number and order) of elements in a View cannot. Changing the structure of Elements can only be done by inserting, moving or removing nested Views via a ViewContainerRef. Each View can contain many View Containers.

Example

Given this template...

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

We have two TemplateRefs:

Outer TemplateRef:

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

Inner TemplateRef:

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

Notice that the original template is broken down into two separate TemplateRefs.

The outer/inner TemplateRefs are then assembled into views like so:

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

Members

get context: C

get rootNodes: any[]