Interpolation and the expression context - lordoftheflies/angular-essential-training GitHub Wiki

Up to this point, we have seen how we can get static HTML into the component templates and get components into the component templates. Let's take a look at ways Angular allows us to mark up our template code to get more use out of it. Angular has a template syntax that it supports which is made up of interpolation, binding, expressions, conditional templating, template variables, and template expression operators. We will cover these in more detail in other lessons in this course, but let's begin in this lesson by covering interpolation. Interpolation is a way to get data displayed in the view. That's head to the media-item.component.html file and check out interpolation in action. You do interpolation by using a pair of matching curly braces in the markup. And the contents of the double curly braces is a JavaScript like expression that Angular will evaluate and then convert to a string. So we can add a pair of curly braces in the h tag for the media item name and put an expression like 10 + 5, and see in the browser that Angular evaluates that to 15 and renders it as a string of content in our h tag. But not all expressions are supported. Assignments, newing up variables, expressions that are chained, and incrementors and decrementors are not valid template expressions. The most common use of interpolation is to display some data from a property we have set on the component class. If we switch over to the media-item.component.ts file and add a class property named name, and assign it a string value of The Redemption, we can then flip back over to the template file and put name in our curly braces in place of the test expression. Notice that we use the property name directly in the interpolation statement without any this. reference