4.1 Basic Data Binding With Interpolation

Hi folks, in this lesson, we're going to take a look at how we can bind data to our templates. We've seen that the templates for our components are stored in HTML files alongside the components, and are linked to the component through the component decorator. One point to note while we're talking about templates, is that as well as storing them in separate HTML files and using the template URL property as the configuration object for the decorator, we can also add the templates inline in the component .ts file. In this case we would use template in the decorator object instead of template URL. So if we wanted to use an inline template with our controls component, instead of using template URL, we would use template, and then we could specify the actual template to use here. So this could be really useful for testing when we're creating mocks, but we don't actually want to do that with one of our components, so I'm just gonna put that back to how it was originally. Okay, so let's go to the start component now. The simplest form of data binding is interpolation, and that's like simple token substitution. We've got some text string in the template. So we can see there's a number of hard coded text strings here. Let's move these over to the constants service. So we've specified a number of public properties here which are all strings. So now lets actually initialize these properties with values in the constructor. And we'll copy these straight out of the component. We're already importing the constants service into the stock component and injecting that into the constructor, so the constants property will be available to the component of the start template. We can reference the property directly in the template because it's a public property of the component. So to do that, we can use double curly brackets in the template with the name of the property that we want to use. And if we flick back to the browser now, We can see that the page looks exactly as it did before. However, we know that the text values for the first few elements at the top of the page are now coming from the constants service. Cool, and if these values change, the template will be updated accordingly. But understand that interpolation represents only a one way flow of data, we can also put simple expressions into these curly bracket things. And we can see the result of the expression next to the button here. It's generally best to try and keep the expressions as simple as possible. We won't get any editor support like code completion or syntax highlighting, and debugging these can be awkward. We can also reference methods of the components and the template will display the return value of the function. So if we add a new method to the start component, We can then reference that method within the curly braces in the templates. Awesome! So we can leave most of the interpolation in place here, let's just get rid of this last test one, that's just a test and we aren't actually gonna use that. So in this lesson, we looked at how we can bind data from our component class file to the templates, so that it gets rendered in the UI of the application. We saw that simple interpolation in the template is done using double curly brackets, and expressions that reference public properties from the component class. Private or protected properties can not be bound to a template, so bear that in mind as you build your classes. Thanks for watching.