# Templates Templates are markup which is added to HTML to declaratively describe how the application model should be projected to DOM as well as which DOM events should invoke which methods on the controller. Templates contain syntaxes which are core to Angular and allows for data-binding, event-binding, template-instantiation. The design of the template syntax has these properties: * All data-binding expressions are easily identifiable. (i.e. there is never an ambiguity whether the value should be interpreted as string literal or as an expression.) * All events and their statements are easily identifiable. * All places of DOM instantiation are easily identifiable. * All places of variable declaration are easily identifiable. The above properties guarantee that the templates are easy to parse by tools (such as IDEs) and reason about by people. At no point is it necessary to understand which directives are active or what their semantics are in order to reason about the template runtime characteristics. ## Summary Below is a summary of the kinds of syntaxes which Angular templating supports. The syntaxes are explained in more detail in the following sections.
DescriptionShortCanonical
Text Interpolation 
<div>{{exp}}</div>
Example: 
<div>
  Hello {{name}}!
  <br>
  Goodbye {{name}}!
</div>

<div [text|index]="exp"></div>
Example: 
<div
  [text|0]=" 'Hello' + stringify(name) + '!' "
  [text|2]=" 'Goodbye' + stringify(name) + '!' ">
  <b>x</b>
</div>
Property Interpolation 
<div name="{{exp}}"></div>
Example: 
<div class="{{selected}}"></div>

<div [name]="stringify(exp)"></div>
Example: 
<div [title]="stringify(selected)"></div>
Property binding 
<div [prop]="exp"></div>
Example: 
<div [hidden]="true"></div>

<div bind-prop="exp"></div>
Example: 
<div bind-hidden="true"></div>
Event binding (non-bubbling) 
<div (event)="statement"></div>
Example: 
<div (click)="doX()"></div>

<div on-event="statement"></div>
Example: 
<video #player>
  <button (click)="player.play()">play</button>
</video>
Or: 
<div def="symbol"></div>
Example: 
<video def="player">
  <button on-click="player.play()">play</button>
</video>
Inline Template 
<div template="...">...</div>
Example: 
<ul>
  <li template="for: #item of items">
    {{item}}
  </li>
</ul>

<template>...</template>
Example: 
<ul>
  <template def-for:"item"
            bind-for-in="items">
    <li>
      {{item}}
    </li>
  </template>
</ul>
Explicit Template 
<template>...</template>
Example: 
<template #for="item"
          [for-in]="items">
  _some_content_to_repeat_
</template>

<template>...</template>
Example: 
<template def-for="item"
          bind-for-in="items">
  _some_content_to_repeat_
</template>
## Property Binding Binding application model data to the UI is the most common kind of bindings in an Angular application. The bindings are always in the form of `property-name` which is assigned an `expression`. The generic form is:
Short form 
<some-element [someProperty]="expression">
Canonical form 
<some-element bind-some-property="expression">
Where: * `some-element` can be any existing DOM element. * `someProperty` or `some-property` (escaped with `[]` or `bind-`) is the name of the property on `some-element`. If the property is dash-case, it will be converted into camel-case `someProperty`. * `expression` is a valid expression (as defined in section below). Example: ```
``` In the above example the `title` property of the `div` element will be updated whenever the `user.firstName` changes its value. Key points: * The binding is to the element property not the element attribute. * To prevent custom element from accidentally reading the literal `expression` on the title element, the attribute name is escaped. In our case the `title` is escaped to `[title]` through the addition of square brackets `[]`. * A binding value (in this case `user.firstName`) will always be an expression, never a string literal. NOTE: Unlike Angular v1, Angular v2 binds to properties of elements rather than attributes of elements. This is done to better support custom elements, and to allow binding for values other than strings. NOTE: Some editors/server side pre-processors may have trouble generating `[]` around the attribute name. For this reason Angular also supports a canonical version which is prefixed using `bind-`. ### String Interpolation Property bindings are the only data bindings which Angular supports, but for convenience Angular supports an interpolation syntax which is just a short hand for the data binding syntax. ``` Hello {{name}}! ``` is a short hand for: ``` ``` The above says to bind the `'Hello ' + stringify(name) + '!'` expression to the zero-th child of the `span`'s `text` property. The index is necessary in case there are more than one text nodes, or if the text node we wish to bind to is not the first one. Similarly the same rules apply to interpolation inside attributes. ``` ``` is a short hand for: ``` ``` NOTE: `stringify()` is a built in implicit function which converts its argument to a string representation, while keeping `null` and `undefined` as empty strings. ## Local Variables ## Inline Templates Data binding allows updating the DOM's properties, but it does not allow for changing of the DOM structure. To change DOM structure we need the ability to define child templates, and then instantiate these templates into Views. The Views than can be inserted and removed as needed to change the DOM structure.
Short form 
parent template
<element>
  <some-element template="instantiating-directive-microsyntax">child template</some-element>
</element>
Canonical form 
parent template
<element>
  <template instantiating-directive-bindings>
    <some-element>child template</some-element>
  </template>
</element>
Where: * `template` defines a child template and designates the anchor where Views (instances of the template) will be inserted. The template can be defined implicitly with `template` attribute, which turns the current element into a template, or explicitly with `