diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade index a515d81ca6..beb8b35e13 100644 --- a/public/docs/ts/latest/guide/template-syntax.jade +++ b/public/docs/ts/latest/guide/template-syntax.jade @@ -600,10 +600,10 @@ figure.image-display .l-main-section :marked - ## Attribute, class, and style bindings + ## Attribute, Class, and Style Bindings The template syntax provides specialized one-way bindings for scenarios less well suited to property binding. - ### Attribute binding + ### Attribute Binding We can set the value of an attribute directly with an **attribute binding**. .l-sub-section :marked @@ -653,7 +653,7 @@ code-example(format="nocode"). is to set ARIA attributes, as in this example: +makeExample('template-syntax/ts/app/app.component.html', 'attrib-binding-aria')(format=".") :marked - ### Class binding + ### Class Binding We can add and remove CSS class names from an element’s `class` attribute with a **class binding**. @@ -684,7 +684,7 @@ block dart-class-binding-bug we generally prefer the [NgClass directive](#ngClass) for managing multiple class names at the same time. :marked - ### Style binding + ### Style Binding We can set inline styles with a **style binding**. @@ -713,7 +713,7 @@ block style-property-name-dart-diff .l-main-section :marked - ## Event binding + ## Event Binding The bindings we’ve met so far flow data in one direction: *from the component to an element*. Users don’t just stare at the screen. They enter text into input boxes. They pick items from lists. @@ -730,7 +730,7 @@ block style-property-name-dart-diff the component's `onSave()` method whenever a click occurs: +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".") :marked - ### Target event + ### Target Event A **name between enclosing parentheses** — for example, `(click)` — identifies the target event. In the following example, the target is the button’s click event. +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".") @@ -780,7 +780,7 @@ block style-property-name-dart-diff - ### Custom events with EventEmitter + ### Custom Events with EventEmitter Directives typically raise custom events with an Angular [EventEmitter](../api/core/index/EventEmitter-class.html). A directive creates an `EventEmitter` and exposes it as a property.