7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.1 Basic Data Binding With Interpolation

In this chapter we'll take a deep dive into Angular's HTML templates. We'll start with a look at simple data binding with interpolation in this lesson.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


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.

Back to the top