The document describes how Angular templates are rendered with local variables and bindings. It shows an example Greeter component with an input and greeting property. The component's template is rendered with a Greeter instance and a local name variable bound to the input. Expressions in the template first check locals then the component class properties. Other examples show ngFor rendering a list and encapsulated shadow DOM rendering.

3. @Component({
selector:'greeter',
template:`
<div>
Your name:
<input #name>
<br>
{{greeting}}
</div>
`
})
class Greeter { greeting:string = 'Hello';}
viewA = new View({
template: ...,
context: new Greeter(),
localVars: ['name'],
watchExp : ['greeting']
});

5. @Component({
selector:'greeter',
template:`
<div>
Your name:<input #name>
{{greeting}}
</div>
`
})
class Greeter { greeting:string = 'Hello';}
var greeter =
new Locals(
new Greeter(), {
name: input_element
})
During the resolution of the expressions we
first check the locals, and then the Greeter
instance.

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

7. Count: 2
<ul>
<template view-container-ref></template>
<li>first</li>
<li>second</li>
</ul>

8. <div> | viewA
<my-component> | viewA
#SHADOW_ROOT | (encapsulation boundary)
<div> | viewB
encapsulated rendering | viewB
</div> | viewB
</my-component> | viewA
</div> | viewA

11. Developer guides
Angular code source