From 7e1dba64eb8fc952c33762b0df57bfe87dada28c Mon Sep 17 00:00:00 2001 From: amandaegraham Date: Mon, 18 Jul 2016 23:19:27 -0400 Subject: [PATCH] Interpolation Copy Edit --- public/docs/ts/latest/guide/template-syntax.jade | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade index aa065874d7..3442567e9a 100644 --- a/public/docs/ts/latest/guide/template-syntax.jade +++ b/public/docs/ts/latest/guide/template-syntax.jade @@ -66,8 +66,8 @@ code-example(language="html" escape="html"). +makeExample('template-syntax/ts/app/app.component.html', 'title+image')(format=".") :marked The material between the braces is often the name of a component property. Angular replaces that name with the - string value of the corresponding component property. In this example, Angular evaluates the `title` and `heroImageUrl` properties - and "fills in the blanks", displaying first a bold application title and then a heroic image. + string value of the corresponding component property. In the example above, Angular evaluates the `title` and `heroImageUrl` properties + and "fills in the blanks", first displaying a bold application title and then a heroic image. More generally, the material between the braces is a **template expression** that Angular first **evaluates** and then **converts to a string**. The following interpolation illustrates the point by adding the two numbers within braces: @@ -76,13 +76,13 @@ code-example(language="html" escape="html"). The expression can invoke methods of the host component, as we do here with `getVal()`: +makeExample('template-syntax/ts/app/app.component.html', 'sum-2')(format=".") :marked - Angular evaluates all expressions in double curly braces, converts the expression results to strings, and concatenates them with neighboring literal strings. Finally, + Angular evaluates all expressions in double curly braces, converts the expression results to strings, and links them with neighboring literal strings. Finally, it assigns this composite interpolated result to an **element or directive property**. - We appear to be inserting the result between element tags and assigning to attributes. + We appear to be inserting the result between element tags and assigning it to attributes. It's convenient to think so, and we rarely suffer for this mistake. - But it is not literally true. Interpolation is a special syntax that Angular converts into a - [property binding](#property-binding), as we'll explain below. + Though this is not exactly true. Interpolation is a special syntax that Angular converts into a + [property binding](#property-binding), and is explained below. But first, let's take a closer look at template expressions and statements.